绘制直线、图形
this.test1 = document.getElementById('test1');
this.test1.width = 1024;
this.test1.height = 900;
let ctx1;
if (this.test1.getContext('2d')) {
ctx1 = this.test1.getContext('2d');
} else {
alert('不支持canvas')
}
ctx1.beginPath();
ctx1.moveTo(100,200);
ctx1.lineTo(200,300);
ctx1.lineTo(200,200);
ctx1.fillStyle='red';
ctx1.fill();
ctx1.pathClose();
ctx1.strokeStyle='black'
ctx1.strokeWidth=3;
ctx1.stroke();
圆弧的绘制
this.test2 = document.getElementById('test2');
this.test2.width = 1024;
this.test2.height = 900;
let ctx2;
if (this.test2.getContext('2d')) {
ctx2 = this.test2.getContext('2d');
} else {
alert('不支持canvas')
}
for (let i=1; i<= 10; i++) {
ctx2.beginPath();
ctx2.arc(50+100*(i-1), 500, 30, 0, 0.2*i*Math.PI, true);
ctx2.closePath();
ctx2.stroke();
}
ctx2.fillStyle = 'orange';
for (let i=1; i<= 10; i++) {
ctx2.beginPath();
ctx2.arc(50+100*(i-1), 700, 30, 0, 0.2*i*Math.PI, true);
ctx2.stroke();
ctx2.fill();
}