HTML5 Canvas：如何在画布上有图像和形状，并且形状是 Drag n Droppable？答案

【问题标题】：HTML5 Canvas: how to have an image and a shape on the canvas and shape is Drag n Droppable?HTML5 Canvas：如何在画布上有图像和形状，并且形状是 Drag n Droppable？
【发布时间】：2012-07-11 14:46:31
【问题描述】：

我在创建 HTML5 画布时遇到问题，其中存在图像、形状并且形状可在同一舞台上拖动。我的直觉告诉我，我需要创建多个图层或多个阶段/画布。然后让一个是常规的，另一个是动力学的。我找到了一些可拖动形状的代码，显示图像和形状的代码，我认为我的问题只在于语法的实现。代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200

        var layer = new Kinetic.Layer();
        var rectX = stage.getWidth() / 2 - 50;
        var rectY = stage.getHeight() / 2 - 25;

        var box = new Kinetic.Rect({
          x: rectX,
          y: rectY,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4,
          draggable: true
        });

        var layer1 = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
          var image = new Kinetic.Image({
            x: stage.getWidth() / 2 - 53,
            y: stage.getHeight() / 2 - 59,
            image: imageObj,
            width: 106,
            height: 118
          });

          layer1.add(image);
          stage.add(layer1);

        // add cursor styling
        box.on("mouseover", function() {
          document.body.style.cursor = "pointer";
        });
        box.on("mouseout", function() {
          document.body.style.cursor = "default";
        });

        layer.add(box);
        stage.add(layer);

        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
      };

    </script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>

【问题讨论】：

这个问题与 Java 无关。
我把那个标签加到上面是我的错。根据我的研究，HTML5 画布有时在代码主体中使用 Java 或 Javascript。我认为也许 Java 用户也可能对我的问题有看法。他们仍然可能，只是你没有。
Java 和 JavaScript 除了名称相似之外没有任何关系。
Java 是一种在 PC 上运行的编程语言。 HTML 是用于网页开发的标记语言，尽管您可以使用 Java（或任何其他语言）来处理对服务器的请求。当您使用 HTML 5 创建单个页面时，您无需编写 Java，它也不会在后台使用 Java。不过，看起来 HTML 5 画布类似于 Java 图形：canvastoolkit.codeplex.com。

标签： javascript html html5-canvas

【解决方案1】：

试试这个网站：w3shools.com/html5/html5_draganddrop.asp

【讨论】：