html>
<html>
<head>
<meta
charset="utf-8">
<title>Canvas
Circle</title>
</head>
<body>
<canvas
id="myCanvas"
width="300"
height="150"
style="border:1px
solid #000;">
若你的瀏覽器不支援HTML5，就看到到這行字</canvas>
<script
type="text/javascript">
var
c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
ctx.beginPath();
/*
第一個參數是距畫布左邊界的距離
第二個參數是距畫布上邊界的距離
第三個參數圓的半徑
第四個參數是定義圓開始的起點，如全圓傳0、半圓就傳Math.PI
第四個參數是定義圓結束的終點
*/
ctx.arc(95,
50, 50, 0, 2*Math.PI);
ctx.stroke(); //畫出你定義的圖形，若忘了這行，圈圈就不會出現
</script>
</body>
</html>
執行結果如下：
沒有留言:
張貼留言