虛線 · 前端技術總結

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) 我走得很慢，但是我從來不會后退。（亞伯拉罕.林肯美國） ~~~