HTML5 Canvas的常用线条属性值总结

var context = canvas.getContext("2d");

// 实例1: 圆形端点,斜角连接,在画布左上角 context.beginPath();

context.moveTo(0,0); context.lineTo(180,0);

context.lineTo(180,180); context.lineJoin = 'bevel';

context.lineCap = 'round'; context.lineWidth = 10;

context.strokeStyle = "red"; context.stroke();

// 实例2: 圆形端点,斜角连接,不在画布左上角

context.beginPath(); context.moveTo(300,200);

context.lineTo(480,200); context.lineTo(480,380);

context.lineJoin = 'bevel'; context.lineCap = 'round';

context.lineWidth = 10; context.strokeStyle = "blue";

context.stroke();

// 实例3: 平直端点,圆形连接,不在画布左上角 context.beginPath();

context.moveTo(600,400); context.lineTo(780,400);

context.lineTo(780,580); context.lineJoin = 'round';

context.lineCap = 'butt'; context.lineWidth = 10;