canvas入门学习

canvas是一个可以使用js在其中绘制图形的 HTML元素，同时也可以绘制动画等内容，今天进行简单的入门学习。

绘制矩形

<canvas id="canvas-demo" width="500" height="500"></canvas>var canvas = document.getElementById('canvas-demo');var context = canvas.getContext('2d');context.fillStyle = '#00ffff';context.strokeStyle = '#ff00ff';context.fillRect(20,20,100,100);context.clearRect(30,30,80,80);context.strokeRect(40,40,60,60);

绘制三角形

context.beginPath();context.moveTo(20,20);context.lineTo(200,200);context.lineTo(20,200);context.fillStyle = '#00ffff';context.fill();context.beginPath();context.moveTo(40,20);context.lineTo(220,20);context.lineTo(220,200);context.closePath();context.strokeStyle = '#00ffff';context.stroke();

绘制圆形

context.strokeStyle = '#00ffff';context.beginPath();context.arc(100,100,50,0,Math.PI * 2);context.stroke();context.fillStyle = '#ffff00';context.beginPath();context.arc(150,100,50,0,Math.PI);context.fill();

二次贝塞尔曲线

context.strokeStyle = '#00ffff';context.beginPath();context.moveTo(20,20);context.quadraticCurveTo(50,120,200,20);context.stroke();

三次贝塞尔曲线

context.fillStyle = '#ff0000';context.beginPath();context.moveTo(20,20);context.bezierCurveTo(60,200,160,200,200,20);context.fill();

使用Path2D绘制矩形

context.strokeStyle = '#ff0000';var rectangle = new Path2D();rectangle.rect(20,20,150,100);context.stroke(rectangle);

over…