HTML5 - Canvas的使用样例3（使用路径绘制自定义形状，并填充）

下面通过样例演示使用路径绘制一个三角形并进行填充。 1，绘制时要注意如下两个地方：
（1）路径绘制完毕后，要调用 closePath() 来明确地关闭路径。
（2）看下面代码其实我只画了两条边，因为 closePath() 会自动在最后一个绘制点与绘制起点间绘制一条线。
（3）最好先填充颜色，再绘制轮廓，否则轮廓线会有一部分被填充色覆盖掉。

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

//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();

//填充内部
context.fillStyle = "orange";
context.fill();

//绘制轮廓
context.lineWidth = 10;
context.strokeStyle = "#cd2828";
context.stroke();

2，设置绘图上下文的lineJoin属性指定线段交点的形状 

context.lineJoin = "round";

context.lineJoin = "bevel";