Javascript 在画布中绘制div元素_Javascript_Jquery_Canvas

Javascript 在画布中绘制div元素

javascript jquery canvas

Javascript 在画布中绘制div元素,javascript,jquery,canvas,Javascript,Jquery,Canvas,我有这个问题：当用户放下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; }

我有这个问题：

当用户放下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;
}
});

您不能访问像这样存储为CSS背景图像的图像-没有图像元素

如果图像是

看

（更难的）替代方法是使用

window.getComputedStyle（）

从元素中读取

背景图像

CSS属性，解析它，然后创建一个具有相同源的全新

图像

对象。

使用jQuery在html画布上绘制div背景图像

您可以获得如下所示的已删除div的背景图像URL：

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

然后，您只需新建一个图像元素，并将该URL作为其.src:

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

下面是代码和小提琴：


身体{
填充：20px；
}
#x{
边框：1px纯绿色；
光标：移动；
背景：url（'http://www.kidzui.com/images/layout/spaceship/star-orange-full.png")不重复;；
高度：40px；
宽度：40px；
}
#x、 #c{
显示：块；
明确：两者皆有；
}
#c{
边缘顶部：30px；
边框：1px纯红
}
$（函数（）{
$（'#x'）.draggable（）；
$（'#c'）。可拖放({
drop：函数（事件、用户界面）{
var img=ui.draggable；
var bkURL=img.css（“背景图像”）；
bkURL=bkURL.substr（5）.substr（0，bkURL.length-7）；
var ctxt=$（“#c”）[0].getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
ctxt.drawImage（img，0，0）；
}
img.src=bkURL
返回false；
}
});
});   // end$（函数（）{}）；

这真是一个很好的答案，你为我节省了很多时间

<!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>