绘制一个三角形
例如，绘制三角形的代码如下：
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20); //绘制起始点
ctx.lineTo(10,90);
ctx.lineTo(90,90);
// ctx.fill(); //填充
![Uploading 45416FA1-329C-4054-A94A-08B732DF8B3B_494408.png . . .]
ctx.lineWidth = 10; //线的宽度
ctx.strokeStyle = 'red'; // 线的颜色变红
ctx.lineJoin = 'round'; //设置线的圆角 用于转交和两条线的交接点
// ctx.lineCap = 'round'; //设直线的
ctx.closePath(); //结束绘制
ctx.stroke(); //划线 连接点 划线
ctx.beginPath();
ctx.moveTo(120,120); //绘制起始点
ctx.lineTo(150,190);
ctx.lineTo(230,190);
ctx.fill(); //填充
ctx.lineJoin = 'round'; //设置线的圆角 用于转交和两条线的交接点
}
输出看上去如下：
效果
