需要使用: ctx.lineWidth 属性; 它默认为1.0, 不能是负数.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canv" width="300" height="300"></canvas> <script> function draw(){ var canvas = document.getElementById("canv"); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(30, 150); ctx.lineTo(60, 150); ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.moveTo(60, 150); ctx.lineTo(90, 150); ctx.lineWidth = 6; ctx.stroke(); ctx.beginPath(); ctx.moveTo(90, 150); ctx.lineTo(120, 150); ctx.lineWidth = 9; ctx.stroke(); ctx.beginPath(); ctx.moveTo(120, 150); ctx.lineTo(150, 150); ctx.lineWidth = 12; ctx.stroke(); } draw(); </script> </body> </html>
