HTML5是一種用于構建web網頁的編程語言。它可以讓開發人員更加靈活地構建和維護網頁。HTML5中的一個重要新特性是canvas元素。canvas元素可以讓開發者創建2D或3D圖形和動畫效果。

<canvas id="myCanvas" width="400" height="400">
<script>
//獲取canvas元素
var canvas = document.getElementById("myCanvas")
//獲取畫布上下文
var ctx = canvas.getContext("2d")
//繪制魚
ctx.beginPath()
ctx.moveTo(150,150)
ctx.lineTo(200,100)
ctx.lineTo(250,150)
ctx.lineTo(200,200)
ctx.closePath()
ctx.fillStyle = "orange"
ctx.fill()
</script>
</canvas>

使用canvas元素創建捕魚游戲也變得更為容易。下面是一個簡單的捕魚游戲示例代碼。

<canvas id="game-canvas" width="900" height="600">
<script>
var canvas = document.getElementById("game-canvas")
var ctx = canvas.getContext("2d")
var fishes = []
//創建一些魚
for (var i = 0; i < 10; i++) {
fishes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
speedX: Math.random() * 10 - 5,
speedY: Math.random() * 10 - 5,
color: "#"+((1<<24)*Math.random()|0).toString(16)
})
}
//繪制魚
function drawFish(fish) {
ctx.beginPath()
ctx.arc(fish.x,fish.y,20,0,Math.PI*2)
ctx.fillStyle = fish.color
ctx.fill()
}
//繪制整個游戲
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
//繪制魚
for (var i = 0; i < fishes.length; i++) {
var fish = fishes[i]
drawFish(fish)
//讓魚游動
fish.x += fish.speedX
fish.y += fish.speedY
//判斷魚是否超出邊界
if (fish.x < 0 || fish.x > canvas.width) {
fish.speedX = -fish.speedX
}
if (fish.y < 0 || fish.y > canvas.height) {
fish.speedY = -fish.speedY
}
}
}
//每一幀更新游戲
setInterval(draw, 1000/60)
</script>
</canvas>

這個游戲中，我們創建了10條魚，并讓它們在畫布上隨機游動。使用setInterval函數每隔1/60秒更新一次畫布，使得游戲看起來是流暢的。HTML5的canvas元素可以幫助我們輕松地創建各種2D或3D的圖形和動畫效果。