首页 > 代码库 > canvas - 线
canvas - 线
线(4个属性):
lineWidth:<integer> // 宽度
lineCap: butt | round | square // 顶端样式 默认| 圆角 | 方角
lineJoin: miter | round | bevel // 相交样式 直切 | 圆角 | 倒角
miterLimit : <integer default=10> // 当相交模式设置为 直切时有效
lineCap & lineJoin
ctx.lineWidth = 10; ctx.strokeStyle = "#EEF2F0"; ctx.shadowColor = "#78B359"; ctx.shadowOffsetY = 10; (_=>{ for(let i=0;capType=["butt","round","square"][i++];){ ["miter","round","bevel"].forEach((e,j)=>{ ctx.beginPath(); ctx.lineJoin = e; ctx.lineCap = capType; ctx.moveTo(10+i*230,300+j*150); ctx.lineTo(100+i*230,400+j*150); ctx.lineTo(200+i*230,300+j*150); ctx.stroke(); ctx.closePath(); }) }; })();
miterLimit : 1-8
ctx.lineWidth = 10; ctx.strokeStyle = "#EEF2F0"; ctx.shadowColor = "#78B359"; for (var a = 10;a=a-1;){ ctx.shadowOffsetY = 10; ctx.lineJoin = "miter"; ctx.miterLimit = 10-a; //如果设置为0 ,则值为默认10 console.log(ctx.miterLimit) ctx.beginPath() ctx.moveTo(10+(10-a)*100,10); ctx.lineTo(50+(10-a)*100,50); ctx.lineTo(100+(10-a)*100,10); ctx.stroke(); ctx.closePath() }
canvas - 线
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。