站長(zhǎng)資訊網(wǎng)最近你開始在學(xué)習(xí)canvas，打算把學(xué)習(xí)canvas的整個(gè)學(xué)習(xí)過(guò)程當(dāng)中的一些筆記與總結(jié)記錄下來(lái)，如有什么不足之處還請(qǐng)大神們多多指出。
1. canvas介紹
Canvas元素的出現(xiàn)，可以說(shuō)開啟的Web世界繪制動(dòng)畫，圖形的大門，其功能非常強(qiáng)大
canvas 元素是HTML5中功能最強(qiáng)大的元素，它的能力主要是通過(guò)Canvas中的Context（繪圖上下文/繪圖環(huán)境）對(duì)象表現(xiàn)出來(lái)的。該對(duì)象從canvas本身獲取。
var canvas = getElementById('canvas');var context = canvas.getContext('2d');
2. canvas的后備內(nèi)容
Canvas元素之間包含的文本，這種文本稱為 "后備內(nèi)容"，只有在瀏覽器不支持canvas元素時(shí)才會(huì)顯示該文本內(nèi)容
<canvas>當(dāng)前瀏覽器不支持canvas元素，請(qǐng)更換瀏覽器</canvas>
3. Canvas的尺寸
canvas元素時(shí)默認(rèn)寬為300px、高為150px。
我們可以通過(guò)canvas的width，height屬性去修改canvas的大小，我們也可通過(guò)CSS去修改canvas元素的大小。但是二者的修改是有區(qū)別的。
canvas實(shí)際上有兩套尺寸：
一個(gè)是canvas元素的大小，一個(gè)是canvas繪圖表面的大小。
當(dāng)我們用canvas的屬性width，height時(shí)實(shí)際上我們同時(shí)修改了元素的大小與繪圖表面的大小
當(dāng)我們用CSS來(lái)設(shè)定時(shí)，是會(huì)修改canvas元素的大小，不會(huì)影響繪圖表面的大小，這時(shí)瀏覽器就會(huì)對(duì)繪圖表面縮放，會(huì)出現(xiàn)我們不想得到的效果
width與height屬性修改canvas尺寸大小時(shí)的表現(xiàn)
<canvas id="canvas" width="600" height="300">當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器</canvas> <script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d'); cxt.font = "38px Arial"; cxt.fillStyle = "#427ACC"; cxt.strokeStyle = "#00116A"; cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15); cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>
用CSS去修改canvas元素尺寸大小時(shí)的表現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas尺寸問(wèn)題</title> <style>#canvas { margin: 0 auto; padding: 0; width: 600px; height: 300px; border: 1px solid #ccc; }</style> </head> <body> <img src="" alt="" id="dataImage"> <canvas id="canvas">當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器</canvas> <script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d'); cxt.font = "38px Arial"; cxt.fillStyle = "#427ACC"; cxt.strokeStyle = "#00116A"; cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15); cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script> </body> </html>
所以我們?cè)谠O(shè)置Canvas元素的大小時(shí)，最好不要使用CSS去設(shè)置，我們可以這么去設(shè)置
<canvas id="canvas" width="600" height="300">當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器</canvas>
或者
<script type="text/javascript">var canvas = document.getElementById('canvas'); canvas.width = '600'; //canvas的屬性取值為非負(fù)整數(shù)，所以不能帶有pxcanvas.height = '300';</script>
4. canvas API
canvas元素并未提供很多API，它只提供了兩個(gè)屬性三個(gè)方法，而繪圖功能的方法與屬性全都是canvas的繪圖環(huán)境（context）對(duì)象提供。
-
width：設(shè)置/獲取canvas元素繪圖表面的寬度，默認(rèn)值為300。
-
height：設(shè)置/獲取canvas元素繪圖表面的高度，默認(rèn)值為150。
-
getContext(): 返回canvas元素的繪圖環(huán)境對(duì)象。
-
toDataURL(): 描述：返回一個(gè)data URI：會(huì)根據(jù)type指定的參數(shù)形式將canvas中的圖片編碼成一個(gè)UTF-16字符串的形式。
-
toBold(): 描述：創(chuàng)建Blob對(duì)象，用以展示canvas上的圖片；這個(gè)圖片文件可以被緩存或保存到本地，由User Agent( 用戶代理端 )自行決定。
toDataURL():
type 可選參數(shù)
圖片格式，默認(rèn)為 image/png
encoderOptions 可選參數(shù)
當(dāng)圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。
如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92，默認(rèn)分辨率為96dpi。
這里值得注意：
-
如果canvas的高度或者寬度為0時(shí)，會(huì)返回字符串 "data:,"
-
如果傳入的類型不是 "image/png", 但是返回的值以 "data: image/png"開頭，說(shuō)明傳入的類型不支持
-
Chrome支持“image/webp”類型
盡管在默認(rèn)情況下canvas對(duì)象是一副位圖，但是并不是HTML中的img元素，所以我們可以利用toDataURL方法創(chuàng)建一幅表示canvas的圖像;也可以利用此方法創(chuàng)建和操作緩沖canvas。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas尺寸問(wèn)題</title> <style>#canvas { margin: 0 auto; padding: 0; display: none; }</style> </head> <body> <img src="" alt="" id="dataImage"> <canvas id="canvas">當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器</canvas> <script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage'); canvas.width = '600'; //canvas的屬性取值為非負(fù)整數(shù)，所以不能帶有pxcanvas.height = '300';var cxt = canvas.getContext('2d'); cxt.font = "38px Arial"; cxt.fillStyle = "#427ACC"; cxt.strokeStyle = "#00116A"; cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15); cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL(); dataImage.src = dataUrl;</script> </body> </html>
toBold():
目前該方法只有Firefox與IE10瀏覽器支持
參考文章：
MDN Web 技術(shù)文檔
