在画布上绘制Div的背景图像

我有一个精灵图像，我用它来在div上显示图标。我有类名来标识精灵中的每个图标。在画布上绘制Div的背景图像

现在我想要的是，我有一个div显示特定的图标，我想在画布上绘制相同的图标.. I.E. div的背景图像应该在画布上呈现。

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

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

任何人都可以帮助我在画布上呈现div的背景。可用于呈现的值是该特定图标的CSS类名称。它在精灵中的位置。和它的大小。

来源

2015-01-08 Kpatel1989

这不是很清楚你以后。如果你想为图标设置动画效果，那么[this]（http://css-tricks.com/svg-line-animation-works/）可能会有所帮助。 –

@Dura号我不想动画任何东西。我有一个显示精灵图标的div。我想在画布上呈现该图标。 – Kpatel1989

“在画布上呈现该图标”是什么意思？你想显示内部相同的图标作为不同的div的背景吗？ –

enter image description here

下面是如何：

让你的div的背景图像的URI，
从URI，
画出图像在画布上创建的图像。

注意：浏览器可能缓存了背景图片，因此您可能不会往返服务器以重新获取图片。

示例代码和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// get the dataURL of your div's background 
 
var bg = $('#myDiv').css('background-image'); 
 
bg = bg.replace('url(','').replace(')','').replace('"','').replace('"',''); 
 

 
// build an image from the dataURL 
 
var img=new Image(); 
 
//img.crossOrigin='anonymous'; 
 
img.onload=function(){ 
 
    // draw the image onto the canvas 
 
    ctx.drawImage(img,0,0); 
 
} 
 
img.src=bg;

body{ background-color: ivory; padding:10px; } 
 
#myDiv{width:75px;height:75px;background-image:url(https://dl.dropboxusercontent.com/u/139992952/multple/sun.png);} 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id='myDiv'>Sprite div with background image</div> 
 
<canvas id="canvas" width=100 height=100></canvas>

来源

2015-01-08 18:06:05 markE

在画布上绘制Div的背景图像

回答

相关问题