canvas 虚线横线实线横线

最新推荐文章于 2025-04-21 21:32:43 发布

转载最新推荐文章于 2025-04-21 21:32:43 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ylblogs/p/9670360.html

本文介绍如何使用HTML5 Canvas API中的ctx对象绘制带有虚线效果的直线。通过设置线条样式、宽度及颜色，并定义起始与结束坐标来实现精确的直线绘制。

ctx.setLineDash([3, 3]);

ctx.moveTo(0 * pixelRatio, 875 * pixelRatio);

//定义直线的终点坐标为(50,10)

ctx.lineTo(750 * pixelRatio, 875 * pixelRatio);

//沿着坐标点顺序的路径绘制直线

ctx.lineWidth = 1 * pixelRatio;

ctx.strokeStyle = "#DDDDDD";

ctx.stroke();

//定义直线的起点坐标为(10,10)
ctx.moveTo(0 * pixelRatio, 1008 * pixelRatio);
//定义直线的终点坐标为(50,10)
ctx.lineTo(750 * pixelRatio, 1008 * pixelRatio);
//沿着坐标点顺序的路径绘制直线
ctx.lineWidth = 1 * pixelRatio;
ctx.strokeStyle = "#DDDDDD";
ctx.stroke();

转载于:https://www.cnblogs.com/ylblogs/p/9670360.html