H5 Canvas 贴图教程：绘制图片、调整尺寸、旋转、缩放、裁剪

在 H5 Canvas 中贴图通常需要经过以下步骤：

创建一个 Image 对象，用于加载要贴图的图片。
在 Image 对象的 onload 事件中，获取图片的宽度和高度，并将图片绘制到 canvas 中。
使用 canvas 的 drawImage 方法将图片绘制到 canvas 上，并指定图片的坐标和尺寸。
可以使用 canvas 的其他方法对图片进行处理，如旋转、缩放、裁剪等。

以下是一个简单的 H5 Canvas 贴图的示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Canvas 贴图示例</title>
</head>
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>
	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// 创建一个 Image 对象
		var img = new Image();
		img.src = "image.jpg";

		// 在 Image 对象的 onload 事件中，获取图片的宽度和高度，并将图片绘制到 canvas 中
		img.onload = function() {
			var imgWidth = img.width;
			var imgHeight = img.height;
			ctx.drawImage(img, 0, 0, imgWidth, imgHeight); // 将图片绘制到 canvas 上
		};
	</script>
</body>
</html>

在上面的示例代码中，我们创建了一个 canvas，并在 canvas 上绘制了一张图片。我们可以通过修改 drawImage 方法的参数来改变图片的位置、尺寸等属性。