📌  相关文章
📜  HTML | DOM 画布对象(1)

📅  最后修改于: 2023-12-03 15:15:36.997000             🧑  作者: Mango

HTML | DOM 画布对象

HTML 画布对象是一种在 HTML 页面中创建图形的方式。它可以通过 JavaScript 来控制。

创建画布对象

要在 HTML 页面中创建画布对象，可以使用<canvas>元素。<canvas>元素提供了一个用于绘制图形的空白区域。可以使用 JavaScript 来访问和渲染这个画布。

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

如果要更改画布的大小，可以使用 HTML 的width和height属性。但是，更改这些属性的大小并不会在画布中创建更多的像素，而只是改变画布的拉伸大小。如果要在画布中创建更多的像素，则需要更改<canvas>元素的内容或使用 CSS 来更改画布的大小。

画布对象的属性和方法

画布对象提供了以下属性和方法：

属性：
  • width：获取或设置画布的宽度。
  • height：获取或设置画布的高度。
  • getContext()：返回画布的绘图上下文对象。可以使用绘图上下文对象来绘制图形。
方法：
  • clearRect(x, y, width, height)：清除画布上的指定矩形区域。
  • fillRect(x, y, width, height)：在画布上绘制一个填充矩形。
  • strokeRect(x, y, width, height)：在画布上绘制一个矩形的边框。
  • beginPath()：开始一条新的路径。
  • moveTo(x, y)：将绘图位置移动到给定的坐标。
  • lineTo(x, y)：绘制一条从当前位置到给定坐标的直线。
  • stroke()：在画布上绘制路径的线条。
  • fill()：在画布上填充路径形状。
例子：

以下是一个简单的例子，演示如何使用画布对象来创建一个矩形：

<!DOCTYPE html>
<html>
<head>
	<title>Canvas Example</title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 定义画布 -->
	<canvas id="myCanvas" width="200" height="200"></canvas>

	<script>
		// 获取画布对象
		var canvas = document.getElementById("myCanvas");

		// 获取绘图上下文对象
		var context = canvas.getContext("2d");

		// 绘制矩形
		context.beginPath();
		context.rect(50, 50, 100, 100);
		context.stroke();
	</script>
</body>
</html>

以上代码将在画布上绘制一个宽高分别为100px的矩形，位于画布的(50,50)位置，如下图所示：

canvas-example

总结

HTML 画布对象提供了一个灵活的方法，在 HTML 页面中创建和控制图形。使用画布对象可以创建复杂的图形和动画，并且这些图形和动画在不同的浏览器和设备上都能正确地显示和运行。