繪制一個三角形
例如，繪制三角形的代碼如下：
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'; //設(shè)置線的圓角 用于轉(zhuǎn)交和兩條線的交接點
// ctx.lineCap = 'round'; //設(shè)直線的
ctx.closePath(); //結(jié)束繪制
ctx.stroke(); //劃線 連接點 劃線
ctx.beginPath();
ctx.moveTo(120,120); //繪制起始點
ctx.lineTo(150,190);
ctx.lineTo(230,190);
ctx.fill(); //填充
ctx.lineJoin = 'round'; //設(shè)置線的圓角 用于轉(zhuǎn)交和兩條線的交接點
}
輸出看上去如下：
效果
