HTML5 小锦鲤游动动画 - 简单易懂教程 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 小锦鲤游动动画</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 = '#ff3300';
		ctx.fill();
		ctx.beginPath();
		ctx.arc(-5, -3, 3, 0, Math.PI * 2, true);
		ctx.fillStyle = '#ffffff';
		ctx.fill();
		ctx.restore();
	}

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

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

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

	draw();
&lt;/script&gt;
</code></pre>
</body>
</html>