canvas畫圓
編輯：HTML5特效代碼
查看效果：http:///keleyi/phtml/html5/4.htm
源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 canvas 畫圓--</title>
</head>
<body>
<a href="http:///a/bjac/eu7eaagg.htm" target="_blank">原文</a>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
提醒您：您的浏覽器不支持HTML5畫布canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#e23652";
cxt.beginPath();
cxt.arc(100, 100, 50, 0, Math.PI * 2, true);
cxt.arc(200, 200, 20, 0, Math.PI * 2);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
JavaScript 語法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。
sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
eAngle 結束角，以弧度計。
counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
定義和用法
arc() 方法創建弧/曲線（用於創建圓或部分圓）。
提示：如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。
提示：請使用 stroke() 或 fill() 方法在畫布上繪制實際的弧。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
浏覽器支持
Internet Explorer 9、10、11、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注釋：Internet Explorer 8 或更早的浏覽器不支持 canvas 元素。
源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 canvas 畫圓--</title>
</head>
<body>
<a href="http:///a/bjac/eu7eaagg.htm" target="_blank">原文</a>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
提醒您：您的浏覽器不支持HTML5畫布canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#e23652";
cxt.beginPath();
cxt.arc(100, 100, 50, 0, Math.PI * 2, true);
cxt.arc(200, 200, 20, 0, Math.PI * 2);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
JavaScript 語法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圓的中心的 x 坐標。
y 圓的中心的 y 坐標。
r 圓的半徑。
sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
eAngle 結束角，以弧度計。
counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
定義和用法
arc() 方法創建弧/曲線（用於創建圓或部分圓）。
提示：如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。
提示：請使用 stroke() 或 fill() 方法在畫布上繪制實際的弧。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
浏覽器支持
Internet Explorer 9、10、11、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注釋：Internet Explorer 8 或更早的浏覽器不支持 canvas 元素。
- 上一頁:html5 a元素廢棄的屬性name
- 下一頁:html5 canvas介紹
小編推薦
熱門推薦