Canvas 04 矩形
常用矩形繪製方法
在這篇文章中，我們將介紹 Canvas 繪製矩形的三個常用方法，並提供一個簡單的範例來展示它們的使用。這些方法包括繪製填充矩形、繪製矩形的邊框以及清除指定區域的矩形。
矩形繪製方法
| 方法 | 功能 | 參數 |
|---|---|---|
ctx.fillRect(x, y, width, height) | 繪製填充的矩形 | x: 水平位置, y: 垂直位置, width: 寬度, height: 高度 |
ctx.strokeRect(x, y, width, height) | 繪製矩形的邊框 | x: 水平位置, y: 垂直位置, width: 寬度, height: 高度 |
ctx.clearRect(x, y, width, height) | 清除指定區域的矩形 | x: 水平位置, y: 垂直位置, width: 寬度, height: 高度 |
HTML 和 JavaScript 範例
下面是一個使用這些方法的簡單範例，這段程式碼創建了一個畫布，並在畫布上繪製不同的矩形，然後清除整個畫布的內容。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hw04</title>
<style>
body {
}
canvas {
margin-top: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="600" height="600"></canvas>
</div>
<script>
const canvas = document.querySelector('#canvas')
const context = canvas.getContext('2d')
// 設置填充色和邊框色
context.fillStyle = 'red'
context.strokeStyle = 'blue'
// 繪製一個填充的紅色矩形
context.fillRect(100, 100, 100, 100)
// 繪製一個藍色邊框的矩形
context.strokeRect(200, 200, 100, 100)
// 清除整個畫布
context.clearRect(0, 0, 600, 600)
</script>
</body>
</html>總結
透過這個範例，我們可以看到如何使用 Canvas API 繪製矩形和清除畫布內容。這些是操作畫布的基本方法，能幫助你創建更加複雜的圖形和效果。如果你想要進一步了解更多 Canvas 方法，請繼續關注更多的教學！