对于长期做2B应用的前端工程师而言，对于canvas有限的了解，仅限于在echart使用，流程设计器使用，或者在图片区域放大等小场景下做过实践；但是最近看到让我惊艳的前端应用，百度脑图，如贝壳的"如视"等,进一步了解到了在于VR以及AR上的应用，让我对于HTML5中Canvas产生的强烈的兴趣所以决定从基础开始，了解一番这个看似熟悉，又不明就里的canvas元素。
笔者从豆瓣上筛选了几本书做为学习入门的教程，最终选定从《HTML canvas 核心技术》着手；话不多说，进入正题；
Canvas是一个特殊的HTML5标签
这看似一句废话，但是不得不提示一句，如下图，IE8及以下均不支持；
所以在使用canvas标签的时候，为了保持应用在早期浏览器中不兼容，建议添加“后备内容”：
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>
在上面的代码中，我们可以看到canvas上设置标签属性width和height，这与设置canvas的css样式有何区别？
Tips: 我们要知道canvas默认元素大小为 300 * 150 屏幕像素
那么我们可以尝试下改成如下的写法:
<canvas id='canvas'>
Canvas not supported
</canvas>
<style>
#canvas {
width: 600px;
height: 300px;
}
</style>
如果是空白的canvas，视觉上看上去是没有任何区别的，但是如果我们给canvas稍微添加一点内容，我们分别在两个canvas中分别执行如下同样的代码；
let canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText("Hello Anker", canvas.width/2 - 150,
canvas.height/2 + 15);
context.strokeText("Hello Anker", canvas.width/2 - 150,
canvas.height/2 + 15);
如果大家有尝试，应该得到的结果应该如下： 行内属性设置width和height：
当设置元素的width与height属性时，实际上是同时修改该元素本身的大小与元素绘图表面的大小。然而，如果是通过CSS来设定canvas元素的大小，那么只会改变元素本身的大小，而不会影响到绘图表面。我们在前面的tips已经看到默认情况下，canvas元素与其绘图表面，都是300像素宽、150像素高；使用CSS来将canvas元素的大小设置成600像素宽、300像素高，然后绘图表面却没有改变，依然还是默认值。
那么浏览器当canvas元素的大小不符合其绘图表面的大小时，浏览器就会对绘图表面进行缩放，使其符合元素大小，这就出现了上面CSS设定的相比于行内属性设定的放大的原因；
canvas元素的API
canvas元素本身只提供了两个属性以及三个方法：
canvas元素的属性
| 属性 | 描述 | 类型 | 取值范围 | 默认值 |
|---|---|---|---|---|
| width | canvas元素绘图表面的宽度；浏览器会将元素大小设定成与绘图便面大小一致；如果在CSS中覆写了元素大小，那么浏览器则会将绘图表面进行缩放，是指符合元素尺寸 | 非负整数 | 有效值范围内的任意非负整数。数值开头可以添加“+”与空格，但是按照规则，不能给数值加px后缀 | 300 |
| height | canvas元素绘图表面的高度；浏览器处理逻辑与width属性一致 | 非负整数 | 在有效范围内任意非负整数 | 150 |
Tips: 注意区分行内属性与行内样式的区别，请特别注意CSS中覆写了元素大小
canvas元素的方法
| 属性 | 描述 |
|---|---|
| getContext() | 返回与该canvas元素相关的绘图环境对象。每个canvas元素均由一个这样的环境对象，而且每个环境对象均与一个canvas元素相关联 |
| toDataURL(type, quality) | 返回一个数据地址(data URL)，你可以将其审定为img元素的src属性值。第一个参数指定了图像的类型，例如iamge/png。第二个参数必须是0~1.0之间的double值，它表示JPEG图像的显示质量 |
| toBlob(callback, type, args...) | 创建一个用于表示此canvas元素图像文件的Blob。第一个参数是回调函数，浏览器会以一个指向Blob的引用为参数，去调用该回调函数。第二个参数以“image/png”这样的形式来指定图像类型。如果不指定，则默认使用“image/png”,其余参数请参看 |
canvas元素本身其实非常简单，提供的属性与API也很有限，实际开发使用过程中，我们更多的是和canvas的绘图环境打交道，下一节我们将介绍canvas的绘图环境
