JavaScript Canvas 教程 HTML5 Canvas 是 HTML5 新增的一個元素，可用于通過 JavaScript 在網頁上繪制圖形。使用 Canvas，您可以繪制圖形，如圓、線條、矩形、三角形、文本等，并且可以添加顏色、漸變和圖案。在本篇文章中，我們將為您介紹 Canvas 的基礎知識和使用方法。 畫布 (Canvas) Canvas 是一項 HTML5 API，它提供了一種通過 JavaScript 和 HTML 繪制圖形的方法。Canvas 有一個被稱為畫布 (canvas) 的 HTML 元素，您可以通過 JavaScript 腳本來繪制圖形。 下面是一個例子，它創建了一個不帶顏色的 200 像素 × 100 像素的畫布：

上面的代碼片段創建一個寬度為 200 像素、高度為 100 像素的畫布，用于存儲、操作和顯示繪制的圖形。可以通過在畫布上繪制曲線、線條、文本、圖像和諸如此類的其他對象來創建出各種復雜的效果。 繪制直線 下面是一個基礎的繪制直線的例子：

這個例子通過使用畫布中的 getContext("2d") 方法得到了一個用于繪制 2D 圖形的對象。ctx.moveTo() 方法定義了線條路徑的起點，ctx.lineTo() 定義了終點。在起點和終點之間畫出了一條直線。ctx.stroke() 方法用于繪制線條。 繪制矩形 下面是一個繪制矩形的例子：

這個例子用到了 fillStyle 屬性，它定義了要填充矩形的顏色。ctx.fillRect() 方法繪制了矩形，它的四個參數分別是矩形的起點坐標和寬度、高度。 繪制圓形 下面是一個繪制圓形的例子：

這個例子使用了 beginPath() 方法來開始一條新路徑，然后調用 arc() 方法繪制了圓形。arc() 方法有 5 個參數：圓心坐標、半徑、起始角度、結束角度和繪制方向（順時針或逆時針）。 繪制文本 下面是一個繪制文本的例子：

這個例子用到了 font 屬性，它定義了文本的字體、大小等樣式。ctx.fillText() 方法繪制了文本，它的三個參數分別是要繪制的文本、起點坐標。 總結 在本文章中介紹了使用 JavaScript 和 HTML 繪制圖形的基礎知識和使用方法。Canvas 可以繪制各種不同的對象，如文本、矩形、圓形以及線條等，可以通過改變屬性和方法的參數來改變對象的顏色、大小、樣式等。希望本文能對您掌握 JavaScript Canvas 繪圖有所幫助。