怎样使用H5制作炫酷的打气筒？

37 min read

以下是使用HTML5 Canvas绘制一个打气筒的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>打气筒</title>
	<style>
		canvas {
			border: 1px solid #333;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="200" height="400"></canvas>

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

		// 绘制打气筒的外形
		ctx.beginPath();
		ctx.moveTo(10, 390);
		ctx.lineTo(10, 10);
		ctx.lineTo(100, 10);
		ctx.lineTo(100, 200);
		ctx.lineTo(80, 200);
		ctx.lineTo(80, 390);
		ctx.closePath();
		ctx.fillStyle = "#FFDAB9";
		ctx.fill();

		// 绘制打气筒的手柄
		ctx.beginPath();
		ctx.moveTo(85, 210);
		ctx.lineTo(100, 210);
		ctx.lineTo(100, 230);
		ctx.lineTo(85, 230);
		ctx.closePath();
		ctx.fillStyle = "#A52A2A";
		ctx.fill();

		// 绘制打气筒的气管
		ctx.beginPath();
		ctx.moveTo(70, 200);
		ctx.lineTo(70, 280);
		ctx.lineTo(60, 280);
		ctx.lineTo(60, 390);
		ctx.lineTo(40, 390);
		ctx.lineTo(40, 280);
		ctx.lineTo(30, 280);
		ctx.lineTo(30, 200);
		ctx.closePath();
		ctx.fillStyle = "#FFDAB9";
		ctx.fill();

		// 绘制打气筒的气嘴
		ctx.beginPath();
		ctx.arc(65, 295, 10, 0, 2 * Math.PI);
		ctx.fillStyle = "#A52A2A";
		ctx.fill();
	</script>
</body>
</html>

这会在网页中显示一个打气筒，可以根据需要进行样式和尺寸的调整。