JavaScript - Canvas

使用 JavaScript 处理 Canvas

HTML <canvas> 元素可用于在网页上创建和绘制图形。它可以在网页上绘制各种图形或形状，如线条、圆圈等，并为它们制作动画。

您可以在 HTML 中定义 <canvas> 元素，之后，您需要使用 JavaScript 在网页上绘制图形。让我们看看在 HTML 中定义 canvas 元素并使用 JavaScript 进行操作的语法。

语法

使用以下语法创建 HTML canvas 元素。

<canvas id="myCanvas" width="480" height="320">
	 	Your browser does not support the HTML canvas tag.
</canvas>

在上面的语法中，我们定义了 id 为 'myCanvas' 的 HTML <canvas> 元素。当浏览器不支持 <canvas> 元素时，将显示写入 <canvas> 标记之间的消息。

我们使用 document 对象的 getElementById（）方法访问 canvas 元素。看看下面的语法 -

var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');

在 JavaScript 中，我们可以使用 getContext（'2d'）方法来获取 2D 画布的上下文。接下来，我们可以使用各种方法绘制形状，并通过将 'ctx' 变量作为引用来填充颜色。

例子

示例：绘制矩形

在下面的代码中，我们在 HTML 中添加了 <canvas> 元素。

在 JavaScript 中，我们使用 getContext（'2d'）方法来访问画布的上下文。之后，我们使用 fillstyle（）方法为画布中的元素着色。fillRect（）方法用于绘制矩形。它采用画布中 4 个角的坐标。

<html>
<body>
	 	<h2> JavaScript - Canvas </h2>
	 	<p> Drawing Rectangle on Canvas using JavaScript</p>
	 	<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
	 	 	 Your browser does not support the HTML canvas tag.
	 	</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（）方法绘制了一个圆。它将圆位置的坐标作为前 2 个参数，将圆的半径作为第三个参数。

<html>
<body>
	 	<h2> JavaScript - Canvas </h2>
		 	<p> Drawing circle on Canvas using JavaScript</p>
	 	<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
	 	 	 	Your browser does not support the HTML canvas tag.
	 	</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> Drawing lines on Canvas using JavaScript</p>
	 	<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
	 	 	 Your browser does not support the HTML canvas tag.
	 	</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> Drawing linear gradient on Canvas using JavaScript</p>
	 	<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
	 	 	 Your browser does not support the HTML canvas tag.
	 	</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> Rendering text on Canvas using JavaScript</p>
	 	<canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
	 	 	 Your browser does not support the HTML canvas tag.
	 	</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 访问元素来绘制图形。我们可以绘制各种形状并为形状添加颜色。

<< JavaScript - 图形 JavaScript - Debouncing (防抖) >>