HTML <canvas> 元素可以用来在网页上创建和绘制图形。它可以绘制各种图形或形状，如线条、圆等，并且可以在网页上进行动画处理。
您可以在 HTML 中定义 <canvas> 元素，之后需要使用 JavaScript 来在网页上绘制图形。让我们看看在 HTML 中定义 canvas 元素并在 JavaScript 中进行操作的语法。
语法
使用以下语法来创建 HTML canvas 元素。
<canvas id="myCanvas" width="480" height="320">
您的浏览器不支持 HTML canvas 标签。
</canvas>
在上述语法中，我们定义了一个带有 id myCanvas 的 HTML <canvas> 元素。写在 <canvas> 标签之间的消息将在浏览器不支持 <canvas> 元素时显示。
我们使用文档对象的 getElementById() 方法来访问 canvas 元素。看下面的语法：
var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');
在 JavaScript 中，我们可以通过使用 getContext('2d') 方法来获取 2D canvas 的上下文。接着，我们可以使用多种方法来绘制一个形状并通过引用 ctx 变量来填充颜色。
示例
示例：绘制矩形
在下面的代码中，我们在 HTML 中添加了 <canvas> 元素。
在 JavaScript 中，我们使用 getContext('2d') 方法来访问 canvas 的上下文。之后，我们使用 fillstyle() 方法来为 canvas 中的元素着色。fillRect() 方法用于绘制矩形。它接受画布中的四个角的坐标。
<html>
<body>
<h2>JavaScript - Canvas</h2>
<p>使用 JavaScript 在 Canvas 上绘制矩形</p>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 30, 470, 240);
</script>
</body>
</html>
示例：绘制圆
在下面的代码中，我们使用 arc() 方法来绘制一个圆。它接受圆的位置的前两个参数作为第一个和第二个参数，并接受圆的半径作为第三个参数。
<html>
<body>
<h2>JavaScript - Canvas</h2>
<p>使用 JavaScript 在 Canvas 上绘制圆形</p>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(300, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
</script>
</body>
</html>
示例：绘制线条
在下面的代码中，我们使用 moveTo() 和 lineTo() 方法来绘制线条。moveTo() 方法接受线的起点作为参数，而 lineTo() 方法接受线的终点作为参数。
<html>
<body>
<h2>JavaScript - Canvas</h2>
<p>使用 JavaScript 在 Canvas 上绘制线条</p>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.moveTo(300, 200);
ctx.lineTo(400, 0);
ctx.stroke();
</script>
</body>
</html>
示例：绘制线性渐变
<html>
<body>
<h2>JavaScript - Canvas</h2>
<p>使用 JavaScript 在 Canvas 上绘制线性渐变</p>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
var grd = ctx.createLinearGradient(0, 0, 440, 0);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 550, 240);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
示例：文本渲染
在下面的示例中，我们在画布上渲染了一条文本信息 "Hello"。为此，我们使用了 fillText() 方法。HTML Canvas 中的 fillText() 方法在 canvas 元素上绘制字符串。
<html>
<body>
<h2>JavaScript - Canvas</h2>
<p>使用 JavaScript 在 Canvas 上渲染文本</p>
<canvas id="myCanvas" width="600" height="200" style="border:1px solid #000000;">
您的浏览器不支持 HTML canvas 标签。
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>
我们已经学会了如何在 HTML 中使用 <canvas> 元素并通过 JavaScript 访问这些元素来绘制图形。我们可以绘制各种形状并向形状添加颜色。