canvas实现生成海报并下载png

遇此需求，因无特殊样式需要等所以花半小时临时支撑一下

所以此次主要提供思路，所以贴了一个简易版上来

预览地址：https://aparesse.com/demo/canvas/

需求：

     1、途中文字，星级等部分可配置
     2、可点击下载生成png

例图：

例图

实现思路：

1、去除图片动态添加部分（如文字等）将去除后的图片绘制在canvas上
关键代码：

_ctx.drawImage(
img,
restorationScale(565),
restorationScale(705)
);

这里需要强调restorationScale方法，此方法用于在不同清晰度屏幕下动态校正px
主要通过

window.devicePixelRatio

2、绘制文字部分
关键代码：

_ctx.fillText(
‘text’,
restorationScale(75),
restorationScale(828)
);

3、下载
关键代码：

var link = document.createElement("a");
link.download = name;
link.href = $canvas.toDataURL('image/png', 1.0);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

总结：没有什么难度的东西 ， 主要注意的地方就是一个不同屏幕下的适配问题
第二个清除画布的时候 可以使用覆盖局部的区域，提升canvas性能，避免重复绘制
细节代码见demo，总共没多少行