首页 > 代码库 > canvas - 路径
canvas - 路径
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 - 路径
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。