三、Canvas arc() 方法

時間 2019-11-20

標籤 canvas arc 方法简体版

原文原文鏈接

一、建立一個圓形：

JavaScript:javascript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.closePath();
ctx.stroke();

二、定義和用法

arc() 方法建立弧/曲線（用於建立圓或部分圓）。css

提示：如需經過 arc() 來建立圓，請把起始角設置爲 0，結束角設置爲 2*Math.PI。html

提示：請使用 stroke() 或 fill() 方法在畫布上繪製實際的弧。java

中心：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)

三、JavaScript 語法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

參數值:

x:圓的中心的 x 座標。canvas

y:圓的中心的 y 座標。spa

r:圓的半徑。3d

sAngle:起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。htm

eAngle:結束角，以弧度計。blog

counterclockwise:可選。規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。ip

四、填充一個圓

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,200,100,0,Math.PI*2,true);
            cans.closePath();
            cans.fillStyle = 'pink';
            cans.fill();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="800px" height="800px"></canvas>
    </body>
</html>

cans.arc(200,200,100,0,Math.PI,true);

cans.arc(200,200,100,0,Math.PI/2,true);

cans.arc(200,200,100,0,Math.PI/2,false);

圓形區塊

立體圓

function pageLoad3(){
   var can = $('can');
   var cans = can.getContext('2d');
   var gnt = cans.createRadialGradient(400,200,0,400,200,300);
   gnt.addColorStop(0,'red');
   gnt.addColorStop(1,'#000');           
   cans.beginPath();   cans.arc(400,200,100,0,Math.PI*2,false);
   cans.closePath();
   cans.fillStyle = gnt;
   cans.fill();}

相關標籤/搜索

每日一句

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