3、Canvas arc() 方法

最新推荐文章于 2022-08-01 19:32:42 发布

weixin_30328063

最新推荐文章于 2022-08-01 19:32:42 发布

阅读量225

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hamigua/p/5512996.html

版权

1、创建一个圆形：

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();

2、定义和用法

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)

3、JavaScript 语法：

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

参数值:

x:圆的中心的 x 坐标。

y:圆的中心的 y 坐标。

r:圆的半径。

sAngle:起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle:结束角，以弧度计。

counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

4、填充一个圆

<!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 οnlοad="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();
}

转载于:https://www.cnblogs.com/hamigua/p/5512996.html

weixin_30328063

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、Canvas arc() 方法

1、创建一个圆形：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();2、定义和用法arc() 方法...
复制链接

扫一扫