canvas詳解---繪製弧線

時間 2019-11-24

標籤 canvas 詳解繪製弧線简体版

原文原文鏈接

Draw an archtml

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);canvas

參數一是圓心的x座標值，參數二是圓心y軸座標值，參數三是半徑，參數四是起始弧度，參數五十終止弧度，最後一個參數表示的繪製方向，默認的是false表示的是順時針的方向。若是是true表示的是逆時針方向。3d

注意了弧度制都是固定好了。如上圖所示htm

請看下面的一段程序blog

<!DOCTYPE html>
<html>
<head>
<title>canvas詳解</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
context.arc(100,100,50,0,1.5*Math.PI);
context.stroke();接口

</script>
</body>
</html>ip

結果顯示：get

若是在context.arc(100,100,50,0,1.5*Math.PI,true);表示的是逆時針從0度到1.5PI處，結果以下圖it

因此從上面的例子能夠看出，弧度值是固定的，不是說順時針畫時就以順時針的方向來看，逆時針畫時就以逆時針的方向來看。這一點千萬要注意。程序

再來看一個程序

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}

結果顯示以下：

這時候你們會感到奇怪了，爲何畫出來的是一個封閉的圖形呢？

其實這是closePath另一個做用了，當前咱們繪製的路徑不是封閉的路徑時，closePath()會將自動路徑封閉。

若是這樣的話

for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.stroke();
}

生成的就是一段段的弧，不會是封閉的了。

並且咱們使用了beginPath(),canvas會知道咱們是從新畫一條，若是給這幾條設置不一樣的屬性也是能夠的。

接下來在看一個問題

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.lineWidth=5;
context.fillStyle="red";
for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath();
context.fill();
}

若是是這樣的話，結果會是填充的幾個弧形

，若是咱們去掉了closePath(),結果也會是同樣的。

爲何呢？

由於若是調用了fill()的話，canvas會自動的找尋首尾而後將其鏈接起來，而後在填充。

canvas還有很對繪製接口，我將在下一張具體講解canvas的其餘知識。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。