php虚线_虚线 · 前端技术总结 · 看云

canvas的虚线画法，主要是在画之前设置下虚线间隔，`ctx.setLineDash([5, 10])`

效果：


代码：

~~~

canvas虚线

var canvas = document.getElementById('canvas');

canvas.width = 500;

canvas.height = 500;

var ctx = canvas.getContext('2d');

// 背景

ctx.fillStyle = '#999';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.lineWidth = 4;

// 实线

ctx.strokeStyle = '#FF9800';

ctx.rect(300, 100, 100, 100);

ctx.stroke();

// 虚线

ctx.setLineDash([5,10]); // 设置间隔

ctx.beginPath();

ctx.strokeStyle = '#f00';

ctx.moveTo(30, 30);

ctx.lineTo(200, 200);

ctx.stroke();

ctx.closePath();

// 虚线圆

ctx.beginPath();

ctx.strokeStyle = '#3884FE';

ctx.arc(150, 250, 20, 0, Math.PI*2);

ctx.stroke();

ctx.closePath();

~~~

励志英语：

~~~

I am a slow walker,but I never walk backwards. ( America)

我走得很慢，但是我从来不会后退。(亚伯拉罕.林肯美国)

~~~