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

canvas是什麼意思

藏色散人
發布: 2019-08-05 10:14:42
原創
18712 人瀏覽過

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 絕大部分的繪圖方法都與 標籤無關,需要使用 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板