Question

我正在尝试将图片绘制到div中，以便以后可以进行拖动效果。似乎必须绘制图像的功能无法正常工作。也许有人暗示为什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>canvas</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div id="myCanvas" width="600" height="400" style="border:1px solid #000000;">

     <div id="imagen" class="mover"></div>

</div>
</body>
</html>

这里是js代码。

context.getContext("2d");
var movibles = $(".mover");
var myCanvas = document.getElementById("myCanvas");


make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/image.jpg';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

Draggable.create("movibles" , {
   type:"y",
   bounds: document.getElementById("myCanvas"),
   throwProps:true,
   onClick: function() {
       console.log("clicked");
   },
   onDragEnd:function() {
       console.log("drag ended");
   }

});

非常感谢。

上下文未定义

0 个答案: