以下為 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");
// 設定顏色
ctx.fillStyle="#FF0000";
// 清空現行路徑，開始新路徑。
ctx.beginPath();
// 繪製圓形 參數依序為 x、y、半徑r、起始角度、結束角度、順時針繪製
ctx.arc(70, 18, 15, 0, Math.PI * 2, true);
// 封閉路徑
ctx.closePath();
// 執行繪製(填滿)
ctx.fill();
</script>
</body>
</html>
結果如下
文章標籤
全站熱搜
留言列表
Technology (30)
