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

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

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

html和css部分

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

1
2
3
4
<div class="scratcher">
    <img class="img" src="prize.jpg">
    <canvas class="canvas" width="500px" height="150px" id="canvas"></canvas>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.scratcher {
    width: 500px;
    height: 150px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*以上这些用于将整个canvas在页面正中间也就是垂直水平居中*/

    overflow: hidden;
}

.img {
    position: absolute;
    top: -40px;
    left: -50px;
}

.canvas {
    position: absolute;
}

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

1
2
3
4
5
.scratcher,
.canvas {
    width: 500px;
    height: 150px;
}

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

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

canvas的默认宽高为300px * 150px，在css中为canvas定义宽高，实际上是把宽高为300px * 150px的画布进行了拉伸。

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