HTML5 Canvas Line线条交汇教程
gooood个人博客网站
canvas
要设置HTML5 Canvas路径的行连接样式，我们可以设置lineJoin context属性。 路径可以具有三个线连接之一：斜接，圆形或斜角。 除非另有说明，否则HTML5 Canvas行连接属性将默认使用斜接样式。
注意：如果您的线条很薄并且没有以陡峭的角度连接，则可能难以区分不同的线连接。
html代码：
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke(); </script> </body> </html>