码迷,mamicode.com
首页 > 其他好文 > 详细

canvas - 路径

时间:2017-06-03 18:15:49      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:lock   com   .sh   store   radius   adr   false   .quad   分享   

ie 8 不支持 canvas

路径方法 * 12

1、fill  

2、stroke  

3、beginPath 

4、moveTo 

5、closePath 

6、lineTo 

7、clip  //相当于选区,可以在此之前,先save 然后之后再restore

8、quadraticCurveTo

9、bezierCurveTo

10、arc

11、arcTo

12、isPointInPath

 

//其中绘制路径有 6 个

  moveTo(x,y)

  lineTo(x,y)

  arc(x,y,radius,start,end,counterclockwise)

  arcTo(x,y,x1,y1,radius)

  quadraticCurveTo(cpx,cpy,x,y)

  bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)

 

// 12个路径相关方法,其中6个是填充效果,6个是画路径方法:

//moveTo lineTo arc arcTo bezierCurveTo quadraticCurveTo

ctx.strokeStyle = "#f89";
ctx.fillStyle = "#f89";
ctx.shadowColor = "#e10";
ctx.shadowOffsetX = ctx.shadowOffsetY =  6;
ctx.lineCap = ctx.lineJoin = "round";
ctx.lineWidth = 10;
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.lineTo(150,200);
ctx.stroke()
ctx.lineTo(200,200);
ctx.lineTo(200,300)
ctx.stroke();
ctx.arc(100,300,30,0,Math.PI,false);
ctx.stroke()

 

 

技术分享

//moveTo lineTo arc arcTo bezierCurveTo quadraticCurveTo

ctx.strokeStyle = "#f89";
ctx.fillStyle = "#f89";
ctx.shadowColor = "#e10";
ctx.shadowOffsetX = ctx.shadowOffsetY =  6;
ctx.lineCap = ctx.lineJoin = "round";
ctx.lineWidth = 10;
ctx.moveTo(100,100);
ctx.quadraticCurveTo(100,300,400,100);
ctx.stroke();
ctx.moveTo(500,100);
ctx.bezierCurveTo(600,200,850,300,900,100);
ctx.stroke();

 

技术分享

canvas - 路径

标签:lock   com   .sh   store   radius   adr   false   .quad   分享   

原文地址:http://www.cnblogs.com/Tachi/p/6937984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!