Question

我有一个功能，可以在某个时间点在画布上绘制图片。当我单击按钮时，我需要根据图像从函数传递的坐标来显示另一幅图像。由于某些原因，只有在我拥有实数值而不是变量时，才能将其显示在画布上。我想以某种方式修复它们，然后显示图像。

我已经尝试过drawImage（heap1,100,100）;并显示给定位置。 X和玩家的坐标值很可能会发生变化，因此，当我使用xPos或yPos时，清除字段后，不会显示地图。

<html> 
<script type="text/javascript">
  var paramSpawnHeap=0
</script>
<!-- заголовок --> 
<head> 
  <meta charset="utf-8"> 
  <title>Example</title> 
</head> 

<!-- страница --> 
<body> 
  <!-- HTML canvas --> 
  <canvas id="canvas1" width='510px' height='300px' style="background-color:#eee; border:1px solid #ccc;">>

  </canvas>
  <input type="button" type="submit" value="spawnHeap" id='spawnHeap' onclick="spawnHeap();" > 

 <!-- onclick="MyTimer()"  onclick="getHeap();"-->

  <!-- JavaScript функции --> 
  <script> 

  // загружаем картинку из файла 
  function loadImageFromFile(url, myFuncWhenLoaded) 
  { 
  // создаем пустую картинку 
  var img = new Image(); 

  // событие onload 
  img.onload = function(event) 
  { 
  // статус 
  event.target.isLoaded = true; 

  // когда картинка загрузилась, вызываем нашу функцию чтобы нарисовать картинку 
  if (myFuncWhenLoaded) 
    myFuncWhenLoaded(img); 
  } 

  // загружаем картинку 
  img.src = url; 

  // результат 
  return img; 
  } 

  // Очищаем canvas белым цветом 
  function clearCanvas() 
  { 
  var canvas = document.getElementById('canvas1'); 
  var context = canvas.getContext('2d'); 

  // рисуем прямоугольник белым цветом 
    context.fillStyle;
    context.rect(0, 0, canvas.width, canvas.height); 
    context.fill(); 
  } 

  // рисуем картинку на canvas 
  function drawImage(object, x, y) 
  { 
  var canvas = document.getElementById('canvas1'); 
  var context = canvas.getContext('2d'); 

  // рисуем картинку 
  context.drawImage(object, x, y); 
  } 


  </script> 

  <!-- главный код --> 
  <script> 

      // создаем timer 
      var TimerID = setInterval(MyTimer, 5 /*00.1 second*/);
      // var newTimerID = window.setInterval(drawHeap, 10 /*00.1 second*/);

      const canvasWidth=510,canvasHeight=300,imageBorderRight=75, imageBorderTop=1
      var dx=0.5,dy=0.5
      // загружаем картинку 
      var myImg = loadImageFromFile("./tree.jpg", null);

      var heap1 = loadImageFromFile("./tree.jpg", null); 
      var heap2 = loadImageFromFile("./tree.jpg", null); 
      var heap3 = loadImageFromFile("./tree.jpg", null); 

      // функция timer 
      var xPos = 100; 
      var yPos = 100;


      function spawnHeap()
      {
        paramSpawnHeap++

      }





      function MyTimer() 
      {
        clearCanvas();
         // paramSpawnHeap=spawnHeap()

      if (paramSpawnHeap==1)
      {
        var heapCoordinateX=xPos,heapCoordinateY=yPos


      //   drawImage(heap1, heapCoordinateX, heapCoordinateY);
        // heapCoordinateX=0;
        // heapCoordinateY=0

        drawImage(heap1,canvasWidth-heapCoordinateX,canvasHeight-heapCoordinateY);
        // paramSpawnHeap--
        // heapCoordinateX=0,heapCoordinateX=0
      } 




    // рисуем картинку по позиции x,y 
    drawImage(myImg,xPos ,yPos ); 

    // меняем позицию картинки 
    xPos+= dx;
    yPos+=dy;
    if(xPos+dx>canvasWidth-imageBorderRight||xPos + dx < imageBorderTop)
    {
      dx=-dx;//обратное направление
    }

    if(yPos + dy > canvasHeight-imageBorderRight || yPos + dy < imageBorderTop) 
    {
        dy = -dy;
    }



  } 

  </script> 
</body> 

</html>

如何使用不断变化的计时器获取值并将其写入变量

0 个答案: