Canvas学习系列一：初识canvas - beevesnoodles_H5之家 - 中国HTML5教程资源分享第一站

最近你开始在学习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>当前浏览器不支持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=""> <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>当前浏览器不支持canvas，请更换浏览器</canvas>

或者

4. canvas API

canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。

toDataURL():

　 type 可选参数

　　图片格式，默认为 image/png

　　encoderOptions 可选参数

　　当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

　　如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。

　　这里值得注意：

<!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=""> <canvas>当前浏览器不支持canvas，请更换浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var dataImage = document.getElementById('dataImage'); canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有px canvas.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 技术文档