画布

HTML 5中的画布（Canvas）元素是一个非常强大的工具，可以用来绘制图形、动画和交互式内容。在本教程中，我们将介绍如何在HTML中使用Canvas元素并绘制基本形状和文本。

1. 创建Canvas元素 要在HTML中创建一个Canvas元素，您只需要在文档中添加一个标签。例如：

<canvas id="myCanvas" width="200" height="100"></canvas>

在这个例子中，我们创建了一个id为"myCanvas"的Canvas元素，设置宽度为200像素，高度为100像素。

2. 获取Canvas上下文 要在Canvas上绘制内容，我们需要获取Canvas的上下文。在JavaScript中，我们可以使用getContext()方法来获取Canvas元素的上下文。例如：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

在这个例子中，我们获取了id为"myCanvas"的Canvas元素，并使用getContext(“2d”)方法获取了2D上下文。

3. 绘制形状 Canvas元素提供了一些方法来绘制基本形状，如矩形、圆形和线条。以下是一些常用的绘制形状的方法：

• 绘制矩形：使用fillRect()或strokeRect()方法来绘制实心或空心矩形。

ctx.fillRect(10, 10, 50, 50); // 绘制实心矩形
ctx.strokeRect(70, 10, 50, 50); // 绘制空心矩形

• 绘制圆形：使用arc()方法来绘制圆形。

ctx.arc(100, 50, 30, 0, 2*Math.PI); // 绘制圆形
ctx.fill();

• 绘制线条：使用moveTo()和lineTo()方法来绘制直线。

ctx.moveTo(10, 70);
ctx.lineTo(60, 70);
ctx.stroke();

4. 绘制文本 Canvas元素还提供了一些方法来绘制文本，如fillText()和strokeText()方法。以下是一个绘制文本的例子：

ctx.font = "20px Arial";
ctx.fillText("Hello World", 10, 90);

5. 清空画布 如果需要清空画布上的内容，可以使用clearRect()方法。例如：

ctx.clearRect(0, 0, canvas.width, canvas.height);

这就是一个简单的HTML 5 Canvas的基础教程，希望能够帮助您入门Canvas元素的使用。您还可以继续学习更高级的Canvas技术，如绘制路径、渐变、阴影等。祝您学习愉快！