在畫布上緩慢地從左到右在畫布上的某個特定位置繪製圖像

我已經加載了一個圖像，所以我有一個Image對象，我希望從特定座標緩慢地左右拖動畫布，使用純JavaScript。我做動畫沒有任何困難。在畫布上緩慢地從左到右在畫布上的某個特定位置繪製圖像

我傾向於創建適合現有邏輯的模式。從圖像創建一個圖案強制第一個圖像以座標0,0開始，然後重複，但是每個重複的起點可能不會落在我想要的圖像座標上，這是在運行時確定的。

任何建議或替代方法非常讚賞。

來源

2014-04-07 user3507568

我不明白你在問什麼 –

您可以使用一個模式，仍然能夠以限定的（0,0）的方式將是：對於使用轉換（）：該模式將有其（ 0,0）在新的座標系中，這意味着它也會被翻譯。

使用翻譯模式的小型演示：

http://jsbin.com/jeyeripu/1/edit?html,js,output

來源

2014-04-07 17:08:37 GameAlchemist

+1，尼斯說明和尼斯演示！ – markE

@markE：thx，我試着用一些l.o.c做一些效果。就像在舊時代的舊的1K比賽中...... :-)完全脫離主題，但我最近嘗試了一些你可能喜歡的東西（可以使用參數部分，包括useBitmapTiles :-)）http://jsfiddle.net/gamealchemist/zF2w8/2/ – GameAlchemist

謝謝，這很完美。 – user3507568

把div放在你的圖片上，用jQuery爲它製作動畫效果怎麼樣？請看下面的解決方案：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="jquery.min.js"></script> 
     <style type="text/css"> 
     .box{ 
      width:300px; 
      height: 300px; 
      position: absolute; 
     } 

     #img { 

      background-image: url(img.jpg); 
      background-size: contain; 
      z-index: 1; 
     } 

     #overlay{ 
      background-color:white; 
      z-index: 2; 
     } 

     </style> 
     <script type="text/javascript"> 
     jQuery(window).load(function() { 

      $("#overlay").animate({ 
      width: "0" 
      }, 5000, function() { 
      // Animation complete. 
      console.log("done"); 
      }); 

     }); 

     </script> 

    </head> 
    <body> 

    <div class="box" id="overlay"></div> 
    <div class="box" id="img"></div> 

    </body> 

</html>

來源

2014-04-07 17:08:26 askemottelson

我的形象是不是網頁，所以我沒有用您的解決方案爲這個特殊的情況，但我保存了你的建議。非常感謝 – user3507568

在畫布上緩慢地從左到右在畫布上的某個特定位置繪製圖像

回答

相關問題