首頁 >web前端 >前端問答 >canvas是什麼意思

canvas是什麼意思

藏色散人
藏色散人原創
2019-08-05 10:14:4218705瀏覽

canvas是什麼意思

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 絕大部分的繪圖方法都與 5ba626b379994d53f7acf72a64f9b697 標籤無關,需要使用 JavaScript 對其進行操作,這就是所謂的 Canvas API。

我們先取得到這個元素:

var canvas = document.getElementById(&#39;canvas&#39;);

然後透過一個方法來取得可以呼叫一切Canvas API 的入口:

var ctx = canvas.getContext(&#39;2d&#39;);

看到2d 是不是很激動地聯想到有沒有3d 呢?沒有 3d 的寫法,不過如果想要開啟 3D 世界的大門,則可以寫 canvas.getContext('webgl')。然而 WebGL 是基於 OpenGL ES 2.0 的一套標準,與本文是徹底的兩條路,因此這裡就不討論了。

以上是canvas是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:p是什麼元素下一篇:p是什麼元素