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>

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