canvas是什麼意思?
英文中 Canvas 的意思是“畫布”,不過這裡說的 Canvas 是 HTML5 中新出的一個元素,開發者可以在上面繪製一系列圖形。 Canvas 在HTML 檔案中的寫法很簡單:
<canvas id="canvas" width="宽度" height="高度"></canvas>
其中id 屬性是所有HTML 元素都可以用的,Canvas 自帶的屬性只有後面兩個(分別控制寬度、高度),沒有其它的了。至於相容性,CanIUse 上面寫了,基礎的功能目前用戶使用的 90% 的瀏覽器都支持,所以大部分情況下還是可以放心使用的。
注意,一定要使用 Canvas 自帶的 width 和 height 屬性,不要使用 CSS 來控制,因為 CSS 控制會導致 Canvas 變形。可以試著與 PhptpShop 對比一下,後者是改變“圖像大小”,前者才是正確的改變“畫布大小”。例如下圖是三張圖片的橫向拼接:最左邊的黑框中是大小為50px * 50px 的原圖;中間是改變了圖像大小為100px * 100px 的效果,圖像變得模糊,但是對於圖像本身來說座標範圍並沒有變大;最右邊才是正確的100px * 100px 的Canvas。
Canvas 絕大部分的繪圖方法都與
我們先取得到這個元素:
var canvas = document.getElementById('canvas');
然後透過一個方法來取得可以呼叫一切Canvas API 的入口:
var ctx = canvas.getContext('2d');
看到2d 是不是很激動地聯想到有沒有3d 呢?沒有 3d 的寫法,不過如果想要開啟 3D 世界的大門,則可以寫 canvas.getContext('webgl')。然而 WebGL 是基於 OpenGL ES 2.0 的一套標準,與本文是徹底的兩條路,因此這裡就不討論了。
以上是canvas是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!