最近你開始在學習canvas,打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來,如有什麼不足之處還請大神們多多指出。
1. canvas 介紹
Canvas元素的出現,可以說開啟的Web世界繪製動畫,圖形的大門,其功能非常強大
canvas 元素是HTML5中功能最強大的元素,它的能力主要是透過Canvas中的Context(繪圖上下文/繪圖環境)對象表現出來的。該物件從canvas本身獲取。
var canvas = getElementById('canvas');var context = canvas.getContext('2d');
#2. canvas的後備內容
Canvas元素之間包含的文本,這種文本稱為"後備內容",只有在瀏覽器不支援canvas元素時才會顯示該文本內容
<canvas>当前浏览器不支持canvas元素,请更换浏览器</canvas>
3. Canvas的尺寸
#canvas元素時預設寬為300px、高為150px。
我們可以透過canvas的width,height屬性去修改canvas的大小,我們也可以透過CSS去修改canvas元素的大小。但是二者的修改是有差別的。
canvas其實有兩套尺寸:
#一個是canvas元素的大小,一個是canvas繪圖表面的大小。
當我們用canvas的屬性width,height時實際上我們同時修改了元素的大小與繪圖表面的大小
當我們用CSS來設定時,是會修改canvas元素的大小,不會影響繪圖表面的大小,這時瀏覽器就會對繪圖表面縮放,會出現我們不想得到的效果
width與height屬性修改canvas尺寸大小時的表現
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</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元素尺寸大小時的表現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas尺寸问题</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">当前浏览器不支持canvas,请更换浏览器</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>
#所以我們在設定Canvas元素的大小時,最好不要使用CSS去設置,我們可以這麼去設定
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas,请更换浏览器</canvas>
或
<script type="text/javascript">var canvas = document.getElementById('canvas'); canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有pxcanvas.height = '300';</script>
4. canvas API
canvas元素并未提供很多API,它只提供了两个属性三个方法,而绘图功能的方法与属性全都是canvas的绘图环境(context)对象提供。
width:设置/获取canvas元素绘图表面的宽度,默认值为300。
height:设置/获取canvas元素绘图表面的高度,默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述:返回一个data URI:会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述:创建Blob对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由User Agent( 用户代理端 )自行决定。
toDataURL():
type 可选参数
图片格式,默认为 image/png
encoderOptions 可选参数
当图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。
如果超出取值范围,将会使用默认值 0.92,默认分辨率为96dpi。
这里值得注意:
如果canvas的高度或者宽度为0时,会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头,说明传入的类型不支持
Chrome支持“image/webp”类型
尽管在默认情况下canvas对象是一副位图,但是并不是HTML中的img元素,所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas尺寸问题</title> <style>#canvas { margin: 0 auto; padding: 0; display: none; }</style> </head> <body> <img src="" alt="" id="dataImage"> <canvas id="canvas">当前浏览器不支持canvas,请更换浏览器</canvas> <script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage'); canvas.width = '600'; //canvas的属性取值为非负整数,所以不能带有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 技术文档
以上是Canvas學習系列一:初識canvas的詳細內容。更多資訊請關注PHP中文網其他相關文章!