如何使用js在畫布上繪製圖形

在畫布上，首先使用JavaScript的HTML DOM方法來尋找元素，在使用getContext()方法建立繪圖對象，最後使用HTML DOM Canvas 物件的屬性和方法繪製圖形。

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

建立畫布

在介紹如何繪製圖形前，我們首先要使用元素建立一個畫布：

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">
当前的浏览器不支持HTML5 canvas标记。
</canvas>

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

效果圖：

使用JavaScript在畫布上繪製圖形

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

1、找到畫布元素

我們在繪製圖形時，首先是需要找到需要繪製圖形的畫布，即元素。那麼如何找到畫布元素呢？

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

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

在先前建立畫布時，我們為畫布新增了id="myCanvas"的值，現在就可以透過這個ID值來找出元素。

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(&quot;2d&quot;);
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(&quot;2d&quot;);
ctx.beginPath();  
ctx.arc(95,50,40,0,2*Math.PI);  
ctx.stroke(); 
</script>

使用了arc()方法，可以建立弧或曲線，可以用來繪製圓或部分圓。

效果圖：

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是如何使用js在畫布上繪製圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！