以下為 HTML5 Canvas 繪製線段範例
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 取得 Canvas 元素
var c=document.getElementById("myCanvas");
// 建立繪製物件
var ctx=c.getContext("2d");
// 將繪製點移至 10, 10
ctx.moveTo(10,10);
// 自 10, 10 繪製一條直線至 150, 150
ctx.lineTo(150,50);
// 自 150, 150 繪製一條直線至 10, 50
ctx.lineTo(10,50);
// 執行繪製
ctx.stroke();
</script>
</body>
</html>
結果如下
全站熱搜
留言列表
Technology (30)
