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则封闭}