什麼是canvsa？

canvas是在中新增的一個重要元素，專門用來繪製圖形。這個就是我們透過canvas和js標籤來繪製的影像。

在網頁裡建立這個圖形

1.建立一個canvas畫布

首先需要建立一個畫布，那麼建立畫布的方法呢？

畫布的建立方法：指定id、width（畫布寬度）、height（畫布高度）。
例如：<canvas id="canvas" width="500" height="350"></canvas>
上面這個例項的意思就是，建立一個畫布，長度為500，高度為350.

2.引入繪畫指令碼

引入指令碼的方法：
比如：<script type="text/javascript" src="canvas.js" charset="utf-8"></script>
上面這個例項的意思就是：引入一個名為canvas的JS指令碼，JS指令碼的語言編碼是utf-8

3.使用draw函式進行繪畫

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

在body的屬性裡面，使用onload="draw('canvas');"語句。呼叫指令碼檔案中的draw函式進行圖形繪畫。

第一步我們應該建立一個canvas畫布

<canvas id="canvas" width="500" height="350"></canvas>
這樣一個畫布就建立完成了

引入一個繪畫指令碼，head部分寫上

<script type="text/javascript" src="canvas.js"></script>

這個canvas.js就是我們剛剛建立的指令碼檔案，這樣這個繪畫js就引入了。

需要draw去進行函式的呼叫，使用draw函式進行繪製

那麼這個draw是在body屬性中使用onload="draw('canvas');"這裡body。
<body onload="draw('canvas');">

那麼這樣就建立了我們這個html5網頁，這個時候，我們來檢視我們得網頁，它應該會生成一張500*350的一個圖片。

html5中canvas元素建立畫布介紹

相關文章