1. 绘制图形
HTML5提供了<canvas>元素来实现绘图功能，可以使用JavaScript来控制绘制过程中的各种属性以及操作。下面我们来看一些常用的绘制方法。
1.1 创建canvas元素
首先要在HTML中创建<canvas>元素，它的大小可以通过width和height属性来设置：
<canvas id="mycanvas" width="500" height="500"></canvas>1.2 获取canvas上下文
使用JavaScript获取到canvas元素后，需要通过getContext()方法获取到绘制上下文，以便进行绘图操作。接下来我们介绍一些常见的绘制方法。
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
1.3 绘制矩形
使用fillRect()和strokeRect()方法可以绘制实心和空心的矩形，它们的参数分别表示左上角的x坐标、y坐标、宽度和高度：
// 绘制实心矩形
ctx.fillRect(50, 50, 200, 100);
// 绘制空心矩形
ctx.strokeRect(50, 200, 200, 100);
1.4 绘制圆形
使用arc()方法可以绘制圆形，它的参数分别表示圆心的x坐标、y坐标、半径、起始角度和结束角度（以弧度为单位）：
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2*Math.PI);
ctx.fill();
1.5 绘制路径
使用moveTo()和lineTo()方法可以绘制路径，moveTo()表示移动到指定坐标，lineTo()表示绘制一条直线到指定坐标：
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
2.清空图像
在一些场景中，我们需要清空canvas上的元素，可以使用clearRect()方法来实现。该方法用于清除指定矩形区域内的canvas内容，其参数和绘制矩形的方法一样分别表示左上角的x坐标、y坐标、宽度和高度：
ctx.clearRect(0, 0, canvas.width, canvas.height);