📌  相关文章
📜  HTML<canvas>标签(1)

📅  最后修改于: 2023-12-03 14:41:58.672000             🧑  作者: Mango

HTML 标签

简介

HTML5 中的 <canvas> 标签是一个 HTML 元素，可以使用 JavaScript 在其中绘制图形、动画或游戏等等，通过 <canvas> 提供的 API，可以动态地创建和更新图像并将其显示在网页上。

用法
<canvas id="myCanvas" width="500" height="500"></canvas>

在 HTML 中使用 <canvas> 标签来创建画布（canvas）。画布可以通过 CSS 样式属性进行布局和样式的定制。通过 JS 代码可以在画布上绘制图片、形状、文本等。

API

  • getContext('2d') 方法：获取画布的绘图上下文，html5 中只支持2d绘图。

  • fillRect(x, y, width, height) 方法：在画布上绘制实心矩形。

  • strokeRect(x, y, width, height) 方法：在画布上绘制边框矩形。

  • clearRect(x, y, width, height) 方法：在画布上清除指定区域。

  • beginPath() 方法：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

  • closePath() 方法：闭合路径之后图形绘制命令又重新指向到上下文中。

  • arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法：创建弧/曲线。

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvas 简介</title>
	<style type="text/css">
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('myCanvas');
		var context = canvas.getContext('2d');
		context.fillRect(0, 0, 50, 50);
		context.strokeRect(30, 30, 50, 50);
		context.clearRect(10, 10, 30, 30);
		context.beginPath();
		context.arc(100, 100, 50, 0, 2*Math.PI, true);
		context.closePath();
		context.stroke();
	</script>
</body>
</html>
总结

<canvas> 标签是 HTML5 中用于绘制图形、动画或游戏的画布元素，通过使用 Canvas API，可以实现各种复杂的图形效果，并与其他 HTML 元素进行结合。