HTML5<canvas>元素創建的畫布只是用來承載圖形的，是一個容器；我們還必須使用腳本（通常是JavaScript）來實際動態的繪制圖形。那么如何使用JavaScript在畫布上繪制圖形？本篇文章就給大家具體介紹一下，希望對你們有所幫助。

創建畫布

在介紹如何繪制圖形前，我們首先要使用<canvas>元素創建一個畫布：

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">
當前的瀏覽器不支持HTML5 canvas標記。
</canvas>

設置畫布的大小為：寬400px、高200px，添加一個2px的紅色、實線邊框；在給創建好的畫布一個id="myCanvas"值，方便在下面繪制圖形是找到畫布元素。

效果圖：

使用JavaScript在畫布上繪制圖形

下面我們就來介紹一下如何在畫布上繪制圖形：

1、找到畫布元素

我們在繪制圖形時，首先是需要找到需要繪制圖形的畫布，即<canvas>元素。那么如何找到畫布元素？

其實很簡單，可以通過使用HTML DOM方法getElementById()來完成，例：

var canvas = document.getElementById("myCanvas");// 找到畫布元素

在之前創建畫布時，我們給畫布添加了id="myCanvas"的值，現在就可以通過這個ID值來查找<canvas>元素。

2、配置繪圖的環境，創建繪圖對象

getContext()方法可以返回一個用于在畫布上繪圖的環境，當前唯一的合法值是 "2d"，會指定一個二維繪圖環境；在未來可能會擴展到支持 3D 繪圖。例：

var ctx = canvas.getContext("2d");

使用ctx 對象，就可以在HTML5畫布中繪制圖形了。

3、在畫布上繪制圖形

此時，就可以使用JavaScrip支持的HTML DOM Canvas 對象的屬性和方法來繪制圖形了。下面我們就通過一些簡單的例子來看看如何繪制圖形：

示例1：在畫布上繪制簡單的直線

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); // 意思是開始繪制
ctx.moveTo(0,0); 
ctx.lineTo(300,200); 
ctx.stroke(); 
</script>

可以看出，使用好幾種canvas對象的方法，下面我們來介紹一下：

beginPath()方法：定義開始路徑，或重置當前路徑；表示開始開始繪制。

moveTo(x,y)方法：用于定義直線的起點位置。

lineTo(x,y)方法：用于定義直線的終點位置。

stroke()方法：實際繪制定義的路徑。

效果圖：

示例2：在畫布上繪制簡單的圓形

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); 
ctx.arc(95,50,40,0,2*Math.PI); 
ctx.stroke(); 
</script>

使用了arc()方法，可以創建弧或曲線，可以用于繪制圓或部分圓。

效果圖：

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com