HTML Canvas 圖形
HTML <canvas> 元素用於在網頁上繪製圖形。
左側的圖形是由 <canvas> 建立的。它顯示了四個元素：一個紅色矩形、一個漸變矩形、一個多色矩形和一個多色文字。
什麼是 HTML Canvas？
HTML <canvas> 元素用於透過 JavaScript 動態繪製圖形。
<canvas> 元素只是一個圖形容器。您必須使用 JavaScript 才能實際繪製圖形。
Canvas 有幾種方法用於繪製路徑、框、圓、文字和新增影像。
Canvas 受所有主流瀏覽器支援。
Canvas 示例
Canvas 是 HTML 頁面上的一個矩形區域。預設情況下，canvas 沒有邊框，也沒有內容。
標記如下所示
<canvas id="myCanvas" width="200" height="100"></canvas>
注意：始終指定 id 屬性（將在指令碼中引用），以及 width 和 height 屬性來定義 canvas 的大小。要新增邊框，請使用 style 屬性。
這是一個基本的、空的 canvas 示例
示例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
自己動手試一試 »
新增 JavaScript
建立矩形 canvas 區域後，必須新增 JavaScript 來執行繪製。
以下是一些示例
繪製一條線
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
自己動手試一試 »
繪製一個圓
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
自己動手試一試 »
繪製文字
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
自己動手試一試 »
描邊文字
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
自己動手試一試 »
繪製線性漸變
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 建立漸變
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用漸變填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
自己動手試一試 »
繪製圓形漸變
示例
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 建立漸變
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用漸變填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
自己動手試一試 »
繪製圖像
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
自己動手試一試 »
HTML Canvas 教程
要了解有關 <canvas> 的更多資訊，請閱讀我們的 HTML Canvas 教程。
