canvas 在其他画好的上面继续画_Canvas绘制、合并、保存图像以及存在的问题

最近帮学校官方微信做了一个头像合成的小页面，用户可以自己选择本地照片，上传并裁剪后，与学校logo合成最终图片，用户可以长按保存到本地，同样，我也把他放到了GitHub，效果大概下面这个样子。因为有官方微信的推广，点击量分分钟过5千，虽然是个很一般的东西，自己写的代码也很一般，都是看着朋友圈很多人用着通过自己写的制作器做的头像，感觉很棒哦。

test.gif

这个页面全部在前端完成，因为HTML5的强大，我没写一句后台代码，此外非常感谢这么优秀的开源项目Cropper.js，为我们提供了这么好的裁剪插件。但是在做的过程中，还是遇到了不少问题，特别是canvas绘的图在手机等高分辨率设备上，会变模糊的问题，所以还是有必要总结一下。

Canvas绘图API使用

关于canvas的其他知识自行查阅API，今天直接上手canvas绘制图像。你需要知道

1.canvas的width和height 和css 的width和height不是一回事

image.png

image.png

可以看出canvas的css width,height分别为400px,画布width,height为200，200是把css像素分成了200份，所以填充宽度为100，却占了csswidth的1/2.

结论(假设cx指画布长度单位)

canvas画布的