Question

我想在html和画布上获得一些知识，而且我遇到了一个小问题。我的画布顶部有一个圆圈，下面有2个按钮。可以单击一个按钮，而另一个按钮是输入按钮。我要做的是我应该能够键入第二个按钮，当单击第一个按钮时，第一个按钮的值应该更改为在第二个按钮中键入的值。该点击还应该在x轴上移动圆圈。我做了动作部分，任何人都可以帮助我使用画布内的输入按钮吗？

这是我的代码的一部分，在这里我试图将按钮放在画布外面，但我需要它们在画布中，而不是像html按钮那样：

<script>


  var stage;


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




    var cbgColor = new createjs.Shape();
    cbgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.height,stage.canvas.width);
    stage.addChild(cbgColor);

    var ball = new createjs.Shape();
    ball.graphics.beginFill("#ff0000").drawCircle(0,0,50);
    ball.x=100;
    ball.y=200;
    stage.addChild(ball);


    createjs.Ticker.addEventListener("tick",tick);
    createjs.Tween.get(ball,{loop:false}).to({x:650}, 3000).to({x:100},1);

  }

    function tick(event){
      stage.update();


  }
   function handleClick(event){
   console.log("clicked");

 }

</script>
</head>
<body  bgcolor="black" onload="init()">
  <canvas id="myCanvas" height=300 width=600>
  </canvas><br>


  <script>
  function change()
      {
          var inp = document.getElementById('ip').value;
          document.getElementById('add').value = inp;
          console.log("clicked");
          document.getElementById('ip').value=null;
      }

</script>

  <input id="add" value="Go!" type="button" onclick="change();init();" style="background-color:yellow;font-size:30px;width:110px;height:40px;margin-left:250px"><br>

  <br><input type="text" id="ip" style="background-color:black;color:white;font-size:30px;width:140px;height:40px;margin-left:230px">

在画布中输入文本按钮（createjs）

0 个答案: