Javascript 绘制Div'；画布上的背景图像

我有一个精灵图像，我用它在div上显示图标。 我有类名来识别精灵中的每个图标

现在我想要的是，我有一个div，它显示一个特定的图标，我想在画布上画相同的图标。。也就是说，div的背景图像应该在画布上渲染

我能做的另一件事是。我可以使用图像元素，提供精灵图像url，并在画布上绘制图像

但是由于一些问题。我不能用这个选项

有人能帮我在画布上渲染div的背景吗。 可用于渲染的值是该特定图标的css类名。它在精灵中的位置。以及它的大小。

以下是如何：

• 获取div背景图像的URI
• 从该URI创建一个映像
• 把那个图像画到画布上

注意：浏览器可能缓存了背景图像，因此您可能不会往返到服务器重新蚀刻图像

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//获取div背景的dataURL
var bg=$（'#myDiv'）.css（'background-image'）；
bg=bg.replace（'url（'，''）。replace（'），''）。replace（'，''）。replace（'，''）；
//从dataURL生成一个映像
var img=新图像（）；
//img.crossOrigin='anonymous'；
img.onload=函数（）{
//将图像绘制到画布上
ctx.drawImage（img，0,0）；
}
img.src=bg
body{背景色：象牙色；填充：10px；}
#myDiv{宽度：75px；高度：75px；背景图像：url(https://dl.dropboxusercontent.com/u/139992952/multple/sun.png);}
#画布{边框：1px纯红；}

带背景图像的精灵div
不太清楚你在找什么。如果你想给图标设置动画，给它画图的效果，可能会有帮助。@Dura不，我不想给任何东西设置动画。我有一个显示精灵图标的div。我想在画布上呈现图标。你说的“在画布上呈现图标”是什么意思？是否要在不同div的背景中显示相同的图标？