三、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();}