你的位置:首页 > 软件开发 > 网页设计 > canvas对象arc函数的使用

canvas对象arc函数的使用

发布时间:2016-09-06 11:00:04
(-1)写在前面我用的是chrome49<canvas id="lol" height="300"></canvas>(1)详细介绍arc函数用来显示圆的那一部分context.arc(100,100,50,Math ...

(-1)写在前面

我用的是chrome49

<canvas id="lol" height="300"></canvas>

(1)详细介绍

arc函数用来显示圆的那一部分

context.arc(100,100,50,Math.PI/6,Math.PI*2,false);

1,2 参数指定圆心,

3 参数指定半径,

4 参数指定起始角度,5参数指定结束角度

6 参数为true逆时针画,false顺时针画,不传递为false

a.象限分布

 canvas对象arc函数的使用

example1

在圆确定的情况下,显示圆的那一部分由起始角度、结束角度、画法决定

var context = lol.getContext("2d");

     context.beginPath();

     // context.arc(150,150,100,0,Math.PI/3,true);//1

     context.arc(150,150,100,0,Math.PI/3,false)//2

     context.stroke();

     context.closePath();

    

     context.beginPath();

     context.strokeStyle = "red";

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

canvas对象arc函数的使用canvas对象arc函数的使用

          (1)                     (2)  

 

example2

如果在调用arc方法之前已经有子路径A,会从A的终点引一条直线连接arc方法所显示圆弧的起点

var context = lol.getContext("2d");

     context.beginPath();

     var value = 0;

     for(var i=0;i<4;i++)

     {

         context.arc(150,150,60,value,value+Math.PI/4,false);

//将false改成true你会看到更有意思的

         value += Math.PI/2;

     }

     context.closePath();

     context.stroke();

    

     context.beginPath();

     context.strokeStyle = "red";

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

 canvas对象arc函数的使用canvas对象arc函数的使用

        第五个参数为false                第五个参数为true


 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:canvas对象arc函数的使用

关键词:函数

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。