HTML示例:
<canvas id="canvas" style="width:400;height:300"></canvas>
JS示例:
var context=document.getElementById("canvas").getContext("2d");
context.beginPath();
// 设置线宽
context.lineWidth = 4;
// 设置间距(参数为无限数组,虚线的样式会随数组循环)
context.setLineDash([8, 8]);
// 移动画笔至坐标 x20 y20 的位置
context.moveTo(20, 20);
// 绘制到坐标 x20 y100 的位置
context.lineTo(20, 100);
// 绘制到坐标 x70, y100 的位置
context.lineTo(70, 100);
// 填充颜色
context.strokeStyle="red";
// 开始填充
context.stroke();
context.closePath();
切换回实线:
// 切换回实线
context.setLineDash([]);