HTML5 Canvas API有什么用

這篇文章主要為大家展示了“HTML5 Canvas API有什么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5 Canvas API有什么用”這篇文章吧。

Canvas是依賴分辨率的位圖畫布，可以在其上繪制任意圖形，甚至加載照片。在HTML5中，定義了一系列標(biāo)準(zhǔn)的Canvas API，用于繪制圖形、創(chuàng)建漸變、處理圖像，甚至可以針對像素進(jìn)行處理。

在此，我們先提出兩個問題供大家思考。這兩個問題是大多數(shù)初學(xué)者和一些有一定經(jīng)驗的朋友都未必能夠準(zhǔn)確回答的。請一定仔細(xì)思考這兩個問題，這是成為Canvas高手的基礎(chǔ)問題。

問題1：Canvas是不是透明的？

問題2：Canvas可不可以互相堆疊在一起？

本文僅作為Ganvas API的索引性介紹，詳細(xì)介紹請查看本站其它文章。

以前的同類解決方案

以前要在瀏覽器中進(jìn)行繪圖，我們只能使用SVG（Scalable Vector Graphics，可伸縮矢量圖形）、Flash或者只支持IE的VML（Vector Markup Language，矢量標(biāo)記語言）。

這些技術(shù)有如下的缺點(diǎn)。

? Flash等插件安裝可能失敗或者可能被禁用。

? 插件的安全問題：第三方插件很可能存在安全問題，導(dǎo)致被攻擊。

? 插件和Web頁面的實現(xiàn)方式不一致，導(dǎo)致與其他Web元素的集成是很大問題。

Canvas 的優(yōu)點(diǎn)

我們在學(xué)習(xí)Canvas的時候，可以先了解一些Canvas的優(yōu)點(diǎn)，為讀者建立起一個初步的印象，在以后的實際工程需要時能夠準(zhǔn)確作出技術(shù)選型。

下面是Canvas的主要優(yōu)點(diǎn)。

? 性能好。Canvas的機(jī)制決定了不需要將繪制圖像里的每個圖元當(dāng)做對象存儲，執(zhí)行性能非常好。

? 功能強(qiáng)大。Canvas提供了許多的圖像處理API，能輕松地對圖片、視頻進(jìn)行編輯和處理。

? 兼容性好。目前，所有主流瀏覽器的最新版本都支持HTML5 Canvas，所以不用考慮瀏覽器的兼容性。

檢測瀏覽器是否支持Canvas

在本節(jié)中，我們給出了兩種檢測瀏覽器是否支持Canvas的方法。我們推薦使用第二種方法，結(jié)合標(biāo)簽自身的能力作出簡潔有效的判斷。

? 通過原生JavaScript

通過原生JavaScript代碼檢測瀏覽器是否支持Canvas的代碼如下：

if(!document.createElement('canvas').getContext){

//如果不能建立canvas元素，則執(zhí)行此處的代碼

}

? 直接使用canvas標(biāo)簽來判斷

直接使用canvas標(biāo)簽檢測瀏覽器是否支持Canvas的代碼如下：

<canvas>你的瀏覽器不支持Canvas</canvas>

如果你的瀏覽器支持Canvas API，則瀏覽器將不顯示“你的瀏覽器不支持Canvas”這句話；

而如果你的瀏覽器不支持Canvas API，則瀏覽器將顯示“你的瀏覽器不支持Canvas”，而不解釋<canvas></canvas>標(biāo)簽。

Canvas 主要操作

本節(jié)向讀者簡要介紹Canvas的一些主要操作方法，比如創(chuàng)建Canvas元素、創(chuàng)建二維上下文、設(shè)置Canvas畫布大小、繪制畫布等。

1. 創(chuàng)建Canvas元素

我們通過如下兩種方式來創(chuàng)建Canvas元素。

? 通過HTML創(chuàng)建。HTML頁面里的代碼為：

<canvas id="mycanvas"></canvas>

通過HTML創(chuàng)建后，我們在JavaScript采用如下的方法來獲得這個元素：

var canvas = document.getElementById('mycanvas');

? 通過JavaScript直接創(chuàng)建。創(chuàng)建代碼如下：

var canvas = document.createElement('canvas');

2. 創(chuàng)建二維上下文

使用Canvas，首先要獲取其上下文，然后在上下文中執(zhí)行操作。目前，可選的上下文環(huán)境是2D（3D的上下文還未被HTML5標(biāo)準(zhǔn)所正式支持），代碼如下：

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

3. 設(shè)置Canvas畫布大小

設(shè)置Canvas畫布大小的代碼如下：

canvas.width = 600;

canvas.height = 600;

4．繪制畫布

一旦我們獲取了上下文的引用的話，就可以使用drawImage()方法將其顯示在Canvas上，其基本形式如下：

ctx.drawImage(image, x, y);

image指向的是我們的圖像或者Canvas對象的引用，x和y指的是將圖像放置到畫布上的坐標(biāo)位置。

5. 簡單圖像處理效果

這里我們只簡要介紹了3種圖像處理效果，分別為移動、縮放和旋轉(zhuǎn)，其中涉及translate()、scale()和rotate()方法。

? translate(x,y)方法用來移動Canvas的原點(diǎn)到另外一個位置。它接受兩個參數(shù)，其中x是左右偏移量，y是上下偏移量。

? scale(x,y)方法用來對形狀或者圖像進(jìn)行縮小或者放大。它接受兩個參數(shù)：x、y分別是橫軸和縱軸的縮放因子。

? rotate()方法用于以原點(diǎn)為中心旋轉(zhuǎn) Canvas，它只接受一個參數(shù)：旋轉(zhuǎn)的角度。該值是按照順時針方向計算的，其單位為弧度。

以上是“HTML5 Canvas API有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！