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

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

創(chuàng)建畫布

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

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

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

效果圖：

使用JavaScript在畫布上繪制圖形

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

1、找到畫布元素

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

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

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

在之前創(chuàng)建畫布時(shí)，我們給畫布添加了id="myCanvas"的值，現(xiàn)在就可以通過這個(gè)ID值來查找<canvas>元素。

2、配置繪圖的環(huán)境，創(chuàng)建繪圖對象

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

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

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

3、在畫布上繪制圖形

此時(shí)，就可以使用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()方法：定義開始路徑，或重置當(dāng)前路徑；表示開始開始繪制。

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

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

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

效果圖：

示例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()方法，可以創(chuàng)建弧或曲線，可以用于繪制圓或部分圓。

效果圖：

總結(jié)：

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