绘制一个三角形
例如，绘制三角形的代码如下：

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';  //设置线的圆角   用于转交和两条线的交接点
}

输出看上去如下：

效果