如何解决setLineDash([3,2]),绘制一条实线而不是虚线 画布 HTML5
我正在尝试使用 setLineDash 和 lineDashOffset(HTML5 Canvas-2d Context) 绘制不同的矩形设计。但是绘制的是实线而不是虚线。请帮忙。
注意事项:
- 画布缩放已完成。
- drawLine API 用于绘制线条。
- 我使用不同的整数点来画线。
- setLineDash([3,2])。严格来说,应使用虚线粗细为“3”,它们之间的间距为“2”。
`
this.context.setLineDash([3,2]);
this.context.lineDashOffset = 2;
drawLine(300,9.5,570,10);
drawLine(300,300,100);
drawLine(300,99.5,100);
drawLine(570,100);`
我的完整代码供您参考: Codepen Link
灵感来自: Document Link
解决方法
发生这种情况是因为您使用 closePath()
关闭了路径。
这个方法不是说“路径声明结束”,而是说“让我的路径成为一个封闭的路径”,这意味着它将lineTo
路径中的最后一个入口点。这样做并根据线的长度,第二条线可能有自己的破折号覆盖第一条线的孔。
const context = canvas.getContext("2d");
function drawLine(x1,y1,x2,y2,mode) {
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
switch (mode) {
case "closePath":
context.closePath();
case "lineTo":
context.lineTo(x1,y1);
}
context.stroke();
}
context.lineWidth = 2;
context.setLineDash([3,2]);
context.strokeStyle = "red";
drawLine(30,9.5,30,100,"closePath");
context.strokeStyle = "blue";
drawLine(60,60,"lineTo");
context.strokeStyle = "green";
drawLine(90,90,"");
<canvas id="canvas"></canvas>
为了避免这种情况,请不要调用 closePath()
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。