HTML Canvas 标签

简介

HTML <canvas> 标签用于通过 JavaScript 在网页上绘制图形。您可以使用 <canvas> 来绘制图表、制作游戏、创建动画，甚至是处理照片或实时视频流等。

基本语法

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

在上述代码中，id 属性是必需的，它用于通过 JavaScript 访问 <canvas> 元素。width 和 height 属性指定了 <canvas> 区域的大小，单位为像素。如果这些属性没有被设置，默认值将是 300x150 像素。

使用 JavaScript 绘制图形

要在 <canvas> 上绘制图形，您需要首先获取该元素的上下文（context）对象。然后，您可以使用此上下文对象提供的方法来绘制图形。

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

在上述代码中，getContext("2d") 返回了一个用于在 <canvas> 上绘制的二维渲染上下文对象。

绘制矩形

要使用 <canvas> 绘制矩形，您可以使用 fillRect(x, y, width, height) 或 strokeRect(x, y, width, height) 方法：

// 填充矩形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

// 描边矩形
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.strokeRect(30, 30, 130, 70);

绘制线条

要使用 <canvas> 绘制线条，您可以使用 beginPath()、moveTo(x, y)、lineTo(x, y) 和 stroke() 方法：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.strokeStyle = "green";
ctx.stroke();

绘制圆形和椭圆

要使用 <canvas> 绘制圆形或椭圆，您可以使用 arc(x, y, radius, startAngle, endAngle) 方法：

// 绘制一个圆
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();

// 绘制一个椭圆
ctx.beginPath();
ctx.ellipse(130, 70, 50, 30, Math.PI / 4, 0, 2 * Math.PI);
ctx.strokeStyle = "purple";
ctx.stroke();

结语

HTML <canvas> 标签提供了一个用于通过 JavaScript 绘制图形的平面。这些图形可以是基本的形状，也可以是复杂的图像。希望这个教程能够帮助您更好地理解和使用 <canvas> 标签。