绘图画布

内部的div元素我有这样的jsfiddle： http://jsfiddle.net/VFZ4m/11/绘图画布

当用户放下相同的图像应创建DIV和画布我怎么能做到这一点里面吵架吗？

我想这代码，但它不能正常工作

$('#x').draggable(); 
$('#c').droppable({ 
drop: function(event, ui) { 
    var img = ui.draggable; 
    var ctxt =$("#c")[0].getContext("2d"); 
    ctxt.drawImage(img[0], 0, 0); 
    return false; 
} 
});

来源

2013-07-27 Sora

使用jQuery绘制DIV的背景图像到HTML画布

enter image description here

你可以得到一个下降div的背景图片的URL是这样的：

var img = ui.draggable; 
var bkURL=img.css("background-image"); 
bkURL=bkURL.substr(5).substr(0,bkURL.length-7);

然后你只需新建一个图像元素，并将该网址作为其.src：

var img=new Image(); 
img.onload=function(){ 
    ctxt.drawImage(img, 0, 0); 
} 
img.src=bkURL

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/WzHvJ/

<!doctype html> 
<html lang="en"> 
<head> 

<style> 
    body { 
    padding: 20px;  
    } 
    #x { 
    border: 1px solid green; 
     cursor: move; 
     background:url('http://www.kidzui.com/images/layout/spaceship/star-orange-full.png') no-repeat; 
     height:40px; 
     width:40px; 
    } 
    #x, #c { 
    display: block; 
    clear: both; 
    } 
    #c { 
    margin-top: 30px; 
    border: 1px solid red 
    } 
</style> 

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

    <script> 

    $(function() { 

     $('#x').draggable(); 
     $('#c').droppable({ 
      drop: function(event, ui) { 
       var img = ui.draggable; 
       var bkURL=img.css("background-image"); 
       bkURL=bkURL.substr(5).substr(0,bkURL.length-7); 
       var ctxt =$("#c")[0].getContext("2d"); 
       var img=new Image(); 
       img.onload=function(){ 
        ctxt.drawImage(img, 0, 0); 
       } 
       img.src=bkURL 
       return false; 
      } 
     }); 

    }); // end $(function(){}); 

    </script> 
</head> 
<body> 
    <div id="x">&nbsp;</div> 
    <canvas id="c" width="200" height="200"> 
</body> 
</html>

来源

2013-07-27 17:10:28 markE

那真的是你救了我大量的时间有很大的答案 – Sora