dynamic图标使用图像操作类似于Gmail添加一个计数

我试图弄清楚看源代码，但我无法弄清楚。

我想知道如何使一个像Gmail一样的dynamic图标。

任何想法如何做到这一点？

Answer 1

您可以使用canvas元素制作图片，然后replace当前的图标。 看看下面的链接，以获得一个很好的解释。 参考

代码来自以上参考。

标记

 <link id="favicon" rel="icon" type="image/png" href="image.png" /> 

JS

  (function () { var canvas = document.createElement('canvas'), ctx, img = document.createElement('img'), link = document.getElementById('favicon').cloneNode(true), day = (new Date).getDate() + ''; if (canvas.getContext) { canvas.height = canvas.width = 16; // set the size ctx = canvas.getContext('2d'); img.onload = function () { // once the image has loaded ctx.drawImage(this, 0, 0); ctx.font = 'bold 10px "helvetica", sans-serif'; ctx.fillStyle = '#F0EEDD'; if (day.length == 1) day = '0' + day; ctx.fillText(day, 2, 12); link.href = canvas.toDataURL('image/png'); document.body.appendChild(link); }; img.src = 'image.png'; } })(); 

编辑

必须有一个图像设置。