许久没记录了最近忙着找工作焦头烂额，代码早就写好了一直没空笔记

言归正传！今天说一说canvas，值得开心的是终于知道自己还是对图像处理动画制作，数据可视化哽感兴趣！之后会再研究多一些比如SVG啦，WebGLD3，three.jsetc～

做这个刮刮乐的时候也找了些资料，先把代码效果给出来： 就是模仿那种纸片带有塗层，刮开显示中奖否的效果在外卖啊支付宝啊经常见，所以自己也试着做个

首先创建一个500x100的div用来包裹涂层和涂层下面的图片:

圖片一般选的都不是正好这么大，所有给父级div一个overflow: hidden再将图片定位调整下就可以咯。

因为canvas和父级div宽高相同我的书写习惯又是不喜欢行内css，所有开始我是这么写的

貌似没什么区别但是！但是！
后面test的时候先在涂层上画了个正方形，发现却不是正方形！长宽明显不一样！整個canvas边沿也很模糊好像被拉伸的样子！检查了n次代码！戳了n次自己的眼睛！就是不对！

最后把代码还原到最原始形态，包括canvas宽高放回了行內发现好了！试了几次果然是因为这两个属性！妈卖批为毛！有什么区别！查了资料，才得知

这样画布就会失真并且里面画的东西也會变形，所以画布的尺寸还是在canvas行内设置