Canvas之2画圆 - 个人技术博客

455 字

2 分钟

Canvas之2画圆

2017-06-08

CSS

Canvas

CSS

1. cvs.arc(x,y,radius,startAngle,endAngle,anticlokwise);
- x,y 圆心坐标
- radius半径r
- startAngle 起始角以弧度计算(钟表的3点钟方向是0度,也就是x轴的正方向是0度,默认是顺时针)
- endAngle 结束角
- anticlokwise 是否逆时针默认值false false表示顺时针

1. 案例

案例1<边框半圆>

1
  function draw1(){//边框圆
2
    cvs.strokeStyle='#ffa50';//设置笔触样式(边框样式)颜色
3
    cvs.beginPath();//开始一个路径
4
    cvs.arc(500,500,100,0,Math.PI);//圆心坐标是500,500，半径是100px，起始角为0度，结束角为180度
5
    cvs.closePath();//结束路径
6
    cvs.lineWidth=10;//边框宽度为10px
7
    cvs.stroke();//绘制图形以边框样式绘制
8
  }
9
  draw1();

案例2<同心圆>

1
function draw2(){
2
  cvs.fillStyle='orange';
3
  cvs.beginPath();
4
  //开始一个新的路径
5
  cvs.arc(200,200,60,Math.PI/2,2*Math.PI);
6
  //圆心坐标是(200,200),半径为60px,起始角为90度,结束角为360度
7
  cvs.closePath();
8
  //结束一个路径
9
  cvs.fill();
10
  //绘制图形以填充样式绘制
11
  cvs.strokeStyle='yellow';
12
  //设置 笔触样式(边框样式) 为黄色
13
  cvs.lineWidth=40;
14
  //边框的宽度为40px
15
  cvs.beginPath();
16
  //开始一个新的路径
17
  cvs.arc(200,200,80,0,2*Math.PI);
18
  //圆心坐标是(200,200),半径为80px,起始角度为0度,结束角度为360度
19
  cvs.closePath();//结束一个路径
20
  cvs.stroke();//绘制图形以边框样式绘制
21
}
22
draw2();

案例3<每次调用fill绘制填充图的时候>，会把当次路径的起始点和结束点分别连接，填充闭合部分(如果想让每个路径互不干扰一定要记得写结束路径—>关闭路径)

1
function draw3(){
2
  cvs.strokeStyle='pink';//设置笔触样式(边框样式)颜色为粉色
3
  cvs.beginPath();//开始一个路径
4
  cvs.lineWidth=2;//边框的宽度为2px
5
  cvs.arc(100,100,100,0,Math.PI);//圆心坐标是100,100,半径为100,起始角度为0度,结束角度为180度
6
  cvs.closePath();//结束一个路径
7
  cvs.stroke();//绘制图形以边框样式绘制
8
  cvs.fillStyle='gray';//设置填充颜色为灰色
9
  cvs.arc(300,300,80,0,Math.PI/2);//圆心坐标是300,300，半径是80px，起始角度为0，结束角度为90度
10
  cvs.closePath();
11
  cvs.fill();
12
}
13
draw3();