遇此需求，因無(wú)特殊樣式需要等所以花半小時(shí)臨時(shí)支撐一下
所以此次主要提供思路循头，所以貼了一個(gè)簡(jiǎn)易版上來(lái)
預(yù)覽地址：https://aparesse.com/demo/canvas/
需求：
1、途中文字囤耳，星級(jí)等部分可配置
2捏顺、可點(diǎn)擊下載生成png
例圖：
實(shí)現(xiàn)思路：
1、去除圖片動(dòng)態(tài)添加部分（如文字等）將去除后的圖片繪制在canvas上
關(guān)鍵代碼：
_ctx.drawImage(
img,
restorationScale(565),
restorationScale(705)
);
這里需要強(qiáng)調(diào)restorationScale方法椿浓，此方法用于在不同清晰度屏幕下動(dòng)態(tài)校正px
主要通過(guò)
window.devicePixelRatio
2太援、繪制文字部分
關(guān)鍵代碼：
_ctx.fillText(
‘text’,
restorationScale(75),
restorationScale(828)
);
3、下載
關(guān)鍵代碼：
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);
總結(jié)：沒(méi)有什么難度的東西 扳碍， 主要注意的地方就是一個(gè)不同屏幕下的適配問(wèn)題
第二個(gè)清除畫(huà)布的時(shí)候 可以使用覆蓋局部的區(qū)域提岔，提升canvas性能，避免重復(fù)繪制
細(xì)節(jié)代碼見(jiàn)demo笋敞，總共沒(méi)多少行
