写一个 小锦鲤在游的html5

<!DOCTYPE html>
<html>
<head>
	<title>小锦鲤在游</title>
	<style>
		canvas {
			background-color: #0a0a0a;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500"></canvas>
	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
<pre><code>	// 绘制小锦鲤
	function drawFish(x, y, size) {
		ctx.save();
		ctx.translate(x, y);
		ctx.scale(size, size);
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(20, 10);
		ctx.lineTo(20, -10);
		ctx.closePath();
		ctx.fillStyle = &quot;#ff3300&quot;;
		ctx.fill();
		ctx.beginPath();
		ctx.arc(-5, -3, 3, 0, Math.PI * 2, true);
		ctx.fillStyle = &quot;#ffffff&quot;;
		ctx.fill();
		ctx.restore();
	}

	// 定义小锦鲤的初始位置和大小
	var fishX = 100;
	var fishY = 250;
	var fishSize = 1;

	// 定义小锦鲤的移动速度和方向
	var fishSpeed = 2;
	var fishDirection = &quot;right&quot;;

	// 绘制动画
	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		drawFish(fishX, fishY, fishSize);
		if (fishDirection == &quot;right&quot;) {
			fishX += fishSpeed;
			if (fishX &gt; canvas.width) {
				fishDirection = &quot;left&quot;;
				fishSize = Math.random() * 2 + 0.5;
			}
		} else {
			fishX -= fishSpeed;
			if (fishX &lt; -20) {
				fishDirection = &quot;right&quot;;
				fishSize = Math.random() * 2 + 0.5;
			}
		}
		requestAnimationFrame(draw);
	}

	draw();
&lt;/script&gt;
</code></pre>
</body>
</html>
写一个 小锦鲤在游的html5

写一个小锦鲤在游的html5
