HTML5 Canvas arc()函数
實(shí)例
創(chuàng)建一個(gè)圓形：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注釋?zhuān)篒nternet Explorer 8 或更早的瀏覽器不支持 <canvas> 元素。
定義和用法
arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。
提示：如需通過(guò) arc() 來(lái)創(chuàng)建圓，請(qǐng)把起始角設(shè)置為 0，結(jié)束角設(shè)置為 2*Math.PI。
提示：請(qǐng)使用 stroke() 或 fill() 方法在畫(huà)布上繪制實(shí)際的弧。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
結(jié)束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 語(yǔ)法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| x | 圓的中心的 x 坐標(biāo)。 |
| y | 圓的中心的 y 坐標(biāo)。 |
| r | 圓的半徑。 |
| sAngle | 起始角，以弧度計(jì)。（弧的圓形的三點(diǎn)鐘位置是 0 度）。 |
| eAngle | 結(jié)束角，以弧度計(jì)。 |
| counterclockwise | 可選。規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。 |
為大家介紹曲線的語(yǔ)法。 如果要?jiǎng)?chuàng)建一個(gè)圓形，我們可以使用arc()方法。
語(yǔ)法：arc(定義一個(gè)中心點(diǎn)，半徑，起始角度，結(jié)束角度，和繪圖方向：順時(shí)針或逆時(shí)針)
代碼：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
HTML5 Canvas Arc 說(shuō)明：
八卦圖示例代碼：
程序效果如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<!--下面excanvas.js需下載才能在IE下支持canvas-->
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload = function(){
var ctx = document.getElementByIdx_x_x_x("pic").getContext('2d');
//繪制白色半圓的代碼如下：
ctx.beginPath();
ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill();
//繪制黑色半圓的代碼如下：
ctx.beginPath();
ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill();
//繪制黑色小圓
ctx.beginPath();
ctx.arc(200,240,40,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill();
//繪制白色小圓
ctx.beginPath();
ctx.arc(200,160,40,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill();
//繪制白色小圓心
ctx.beginPath();
ctx.arc(200,160,5,0,Math.PI*2,true);
ctx.fillStyle="black";
ctx.closePath();
ctx.fill();
//繪制黑色小圓心
ctx.beginPath();
ctx.arc(200,240,5,0,Math.PI*2,true);
ctx.fillStyle="white";
ctx.closePath();
ctx.fill();
//繪制文字代碼如下：
ctx.save();
ctx.fillStyle="black";
ctx.globalAlpha="0.4";
ctx.textAlign="center";
ctx.font="32px Arial";
ctx.shadowColor="rgba(0,0,0,0.4)";
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=-10;
ctx.shadowBlur=2;
ctx.fillText('Hello Canavs',200,100);//IE不支持
ctx.restore();
}
</script>
</head>
<body>
<canvas id="pic" width="400" height="400"></canvas>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的HTML5 Canvas arc()函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SAP Fiori应用没能从Fiori
- 下一篇： 使用View modification扩