在畫布上繪製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的背景圖像

回答

相關問題