Canvas学习之基础一

绘制直线、图形

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')
}
//ctx2.fillStyle = 'orange';
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.fill();
}
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.closePath();
    ctx2.stroke();
    ctx2.fill();// 不管有没有pathClose,执行fill则封闭
}