Canvas
长久以来，web上的动画都是 Flash。比如动画广告、游戏等等，基本上都是Flash 实现的。Flash是有缺点的，比如需要安装Adobe Flash player，漏洞多，重量比较大。卡顿和不流畅等等。Canvas是一个轻量级的画布，我们使用Canvas 进行 JavaScript 的编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅
前言
在学习之前，我们浅谈一下canvas，我所理解的canvas就是一个画板，又叫做画布，说白了就是用来画画的，作者是一个艺术家，在自己的一片天地尽情的作画，canvas就像是程序员的画笔，利用canvas提供的api，画出一幅幅生动的交互动画，canvas的应用也非常的广泛，诸如我们常见的，网页游戏、网页地图，网页统计图、等等都离不开canvas的贡献。
浏览器页面的进化之路
既然叫浏览器，那就是用来浏览使用的，这个时候又不得不说一下在浏览器诞生之初，只有一些简单的图形，随着时代的变革，计算机算力的提升，市场对浏览器的需求越来越高，企业都希望自家网站能够在用户使用的时候眼前一亮，比如今天我们想加一个颜色的渐变效果，w3c组织就给cssbackground样式加入linear-gradient属性，需要网页元素有阴影的效果，又加入box-shadow样式，等等，但是更新的速度永远跟不上市场的需求，组织说根本干不了，干不了一点儿。
突然某天，组织脑袋一拍，还更新个啥，给他个画板自己玩儿去吧，这个时候canvas就诞生了，想要啥自己画吧，浏览器不帮你画了，本质上浏览器也是按照开发者的css样式表和html标签，来画出想要的页面，现在把这个权限完全交给了开发者，想怎么玩儿就怎么玩儿。
canvas初体验
创建一个1000 x 600的canvas标签，里面可以写上在canvas不兼容的时的替换内容，例如在低版本浏览器中
注意这里的w:1000、h:600与css样式表的宽高不是同一个东西，canvas属性的width和height定义的是当前可用画布的大小，这里注意，在定义宽高的尽量不要使用style，不然画布会被拉伸，导致失真。
<canvas id="container" width="1000" height="600">
当前浏览器不兼容，请下载最新版本浏览器
</canvas>
获取canvas的上下文对象，在距离画布x:20 y:20 的位置绘制一个200 x 200的矩形
const canvas = document.getElementById("container");
const context = canvas.getContext("2d");
context.fillRect(10,10,200,200);
结尾
结尾浅谈一下说说为啥突然想学canvas吧，当然兴趣是肯定的，对于我来说涨薪才是我最终的目的，哎，开发者也要生存不是，但是身为一个开发者，技术是立身之根本，不管目的是为了涨薪还是兴趣，都应该认真对待。
其次呢，能够有这次的学习机会，对于我来是可遇不可求的，因为在平时的开发中，如果不是专门的开发canvas，大部分人几乎不会对canvas有什么交集，刚好公司对canvas有一定的需求，对于我这个初学者来说刚刚好，不管任何的技术都是需要项目的验证，经验的积累，才能长远的走下去。
你学canvas是为了什么，可以在评论区说说，最后祝愿各位开发者步步高进！！！
