HTML 5畫布滾動事件偵聽器不工作

Question

我有500w * 500h的畫布1，其中包含5000w * 500h的寬背景圖像。我通過設置overflow:hidden來包裝具有div 500 * 500的畫布，以便首先加載背景，但僅顯示背景500w，其餘部分將通過使用scrollLeft屬性滾動viewPort部分來顯示.i添加了一個事件監聽器，用於檢查 - >或< - 按鍵並相應地滾動視口。我的問題是

隨着家居裝和設置正確（背景圖像正確加載，並在畫布上繪製），當我使用下面的代碼

window.onload=function(){ 
//images are loaded and drawn 
//necessary variables defined here  
//view is the element id of the viewport div and is also properly accessed 

     window.addEventListener("keydown",function(e){ 
      keyPressFlag = true; 
      if(e.keyCode == 39) //-> key 
      {view.scrollLeft+=3;} 

     }); 
    }; 

獲得滾動效果。但是當我嘗試按照以下方式實現相同的效果時，我得不到相同的效果。我可以看到RIGHT MOVED登錄到控制檯，但滾動不會發生。

 window.onload=function(){ 
     //images are loaded and drawn 
     //necessary variables defined here  
     //view is the element id of the viewport div and is also properly accessed 
     //keyPressFlag = false; and keyPressed = 0 initially 

    function move() 
    { 
      if(keyPressed == 37) 
      { 
       console.log("LEFT MOVED"); 
      view.scrollLeft -=3; 
      } 
      if(keyPressed == 39) 
      { 
       console.log("RIGHT MOVED"); 
      view.scrollRight +=3; 
      } 

    } 
window.addEventListener("keydown",function(e){ 
    console.log("Key Pressed"); 
    keyPressFlag = true; 
    keyPressed = e.keyCode; 
    move(); 

}); 

window.addEventListener("keyup",function(e){ 
    console.log("key Released"); 
    keyPressFlag = false; 
}); 
}; 

我應該怎樣做，當事件被觸發時通過調用move函數來做背景滾動？

Answer 1

而不是使用包裝，圖像和擺動滾動條位置，您可以使用CSS結合background-position來設置canvas元素的背景，您可以使用CSS控制這些背景。

請記住，將background-position設置爲元素上的內聯樣式屬性很重要，否則將無法通過style屬性獲得。

實施例：

此示例使用兩個輔助功能，一個解析的字符串。它將拆分這兩個位置並剝離最後的「px」單元。另一個將使用您爲x提供的新位置並將其格式化爲有效的css位置。

var canvas = document.getElementById("canvas"), 
 
    cs = canvas.style;   // cache style reference 
 

 
function move(keyPressed) { 
 
    if (keyPressed === 37) { 
 
    setX(getX() - 3);   // update style (see helper functions below) 
 
    } 
 
    else if (keyPressed === 39) { 
 
    setX(getX() + 3); 
 
    } 
 
} 
 

 
window.addEventListener("keydown", function(e) { 
 
    e.preventDefault(); 
 
    move(e.keyCode); 
 
}); 
 

 
// helper functions to parse the css string, and to update it 
 
function getX() {return parseInt(cs.backgroundPosition.split(" ")[0], 10)} 
 
function setX(x) {cs.backgroundPosition = x + "px 0px"}

#canvas { 
 
    border: 1px solid blue; 
 
    background: url(http://i.imgur.com/BoqJ7Wg.jpg) no-repeat; 
 
}

<canvas style="background-position:0 0" id=canvas width=500 height=500></canvas>

如果出界只需添加位置檢查。