使用 HTML 按钮创建 JS

Question

所以我在获取外部按钮以在单击时绘制形状到 canvas 时遇到问题。它只是行不通。我究竟做错了什么？我尝试使用 jQuery 函数，仅使用原生 HTML5，但无济于事。

代码：

JS:

    $(function(){
            $('button').click(function(){
               testButton();
            })
        })      

var stage, output;

        function init() {
            stage = new createjs.Stage("demoCanvas");

            // For mobile devices.
            createjs.Touch.enable(stage);

            // this lets our drag continue to track the mouse even when it leaves the canvas:
            // play with commenting this out to see the difference.
            stage.mouseMoveOutside = true; 

            var circle = new createjs.Shape();
      var square = new createjs.Shape();
      var rec = new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(0, 0, 50);
square.graphics.beginFill("blue").drawRect(0, 0, 50, 50);
rec.graphics.beginFill("green").drawRect(0, 0, 100, 50);

      function testButton(){
        var testsquare = new createjs.Shape();      
   testsquare.graphics.beginFill("yellow").drawRect(0, 0, 50, 50);

        var draggert = new createjs.Container();
      draggert.x = draggert.y = 100;
      draggert.addChild(testsquare);
      stage.addChild(draggert);

        draggert.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });
      }


            var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
            label.textAlign = "center";
            label.y = -7;

            var draggerc = new createjs.Container();
            draggerc.x = draggerc.y = 100;
            draggerc.addChild(circle, label);
            stage.addChild(draggerc);

      var draggers = new createjs.Container();
      draggers.x = draggers.y = 100;
      draggers.addChild(square);
      stage.addChild(draggers);

      var draggerr = new createjs.Container();
      draggerr.x = draggerr.y = 100;
      draggerr.addChild(rec);
      stage.addChild(draggerr);

            draggerc.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

      draggers.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

      draggerr.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });

            stage.update();
        }

HTML:
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="200">
        alternate content
    </canvas>
  <button class = "test">Test</button>
</body>

我在 CodePen 上有我正在处理的演示：https://codepen.io/AoifeMcNeill/pen/bvZJEg?editors=1010

这是我正在进行的一个更大项目的一部分，也是我真正努力工作的部分。我尝试过 Easeljs、Createjs、Paperjs、Konvajs、HTML5 native 等等。我要么做错了，要么遗漏了一些明显的东西。我一直在自学 Canvas，因为这是我的年终项目。不管怎样，如果你想尝试帮助解决我遇到的问题，这里是 CodePen：https://codepen.io/AoifeMcNeill/pen/VXqXgv?editors=1000

如果您能为其中任何一个提供帮助，那就太好了！

Answer 1

所以这里有几个问题导致它无法按预期工作。首先你的范围是错误的，所以函数 testButton 是未定义的，永远不会被解雇。我会通过删除 jquery 函数并使用普通的旧 javascript:

来简化事情

HTML

<button id="testBtn" class="test">Test</button>

JS

testBtn = document.getElementById("testBtn");
testBtn.addEventListener("click", testButton)

我看到的第二个问题是当 testButton 最终被解雇时你没有更新舞台。

用这个替换那个函数：

function testButton(){

    var testsquare = new createjs.Shape(); 
    //Add color to see that a new shape was created 
    var color = createjs.Graphics.getHSL(Math.random()*360| 0 , 100, 50);testsquare.graphics.beginFill(color).drawRect(0, 0, 50, 50);

    var draggert = new createjs.Container();
     //Added in random position to see newly created shape
    draggert.x = Math.random()*100;
    draggert.y = Math.random()*100;
    draggert.addChild(testsquare);
    stage.addChild(draggert);

    draggert.on("pressmove",function(evt) {
            // currentTarget will be the container that the event listener was added to:
            evt.currentTarget.x = evt.stageX;
            evt.currentTarget.y = evt.stageY;
            // make sure to redraw the stage to show the change:
            // this will only happen when shape is moved
            stage.update();   
        });
    //Update stage when new shape is created
    stage.update();   
  }

使用 HTML 按钮创建 JS

CreateJS with HTML button

jquery

button

html5-canvas

createjs

easeljs