HTML5CanvasAPI有什么用

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

創(chuàng)新互聯(lián)公司于2013年成立，先為鄰水等服務建站，鄰水等地企業(yè)，進行企業(yè)商務咨詢服務。為鄰水企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

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

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

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

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

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

以前的同類解決方案

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

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

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

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

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

Canvas 的優(yōu)點

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

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

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

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

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

檢測瀏覽器是否支持Canvas

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

? 通過原生JavaScript

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

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

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

}

? 直接使用canvas標簽來判斷

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

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

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

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

Canvas 主要操作

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

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

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

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

通過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標準所正式支持），代碼如下：

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

3. 設置Canvas畫布大小

設置Canvas畫布大小的代碼如下：

canvas.width = 600;

canvas.height = 600;

4．繪制畫布

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

ctx.drawImage(image, x, y);

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

5. 簡單圖像處理效果

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

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

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

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

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

分享名稱：HTML5CanvasAPI有什么用
分享鏈接：http://muchs.cn/article12/jojedc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、外貿(mào)建站、手機網(wǎng)站建設、企業(yè)建站、虛擬主機、面包屑導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容