結果：
代碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>繪制路徑——直線</h3> <canvas id="c13" width="500" height="400"></canvas> <script> var ctx = c13.getContext('2d'); //繪制X軸 ctx.beginPath(); ctx.moveTo(50, 350); ctx.lineTo(450, 350); ctx.lineTo(450-20, 350-20); ctx.moveTo(450, 350); ctx.lineTo(450-20, 350+20); //ctx.lineJoin = 'miter'; //線的連接處采用尖角 //ctx.lineJoin = 'bevel'; //線的連接處采用方角 ctx.lineJoin = 'round'; //線的連接處采用圓角 ctx.lineWidth = 5; ctx.strokeStyle = '#0a0'; ctx.stroke(); //繪制Y軸 ctx.beginPath(); //必須開始新路徑 ctx.moveTo(50, 350); ctx.lineTo(50, 50); ctx.lineTo(50-20, 50+20); ctx.moveTo(50, 50); ctx.lineTo(50+20, 50+20); ctx.strokeStyle = '#00f'; ctx.stroke(); </script> </body> </html>