html5中如何绘制图形以及清空图像

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);