虚线 · 前端技术总结

canvas的虚线画法，主要是在画之前设置下虚线间隔，`ctx.setLineDash([5, 10])` 效果： ![](https://box.kancloud.cn/daff970db4ad01bc5aaf6b471938995b_409x267.jpg) 代码： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas虚线</title> <script src="jquery.min.js"></script> </head> <body> <canvas id="canvas"></canvas> <script> 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(); </script> </body> </html> ~~~ 励志英语： ~~~ I am a slow walker,but I never walk backwards. ( America) 我走得很慢，但是我从来不会后退。（亚伯拉罕.林肯美国） ~~~