Question

我有500w * 500h的画布1，其中包含5000w * 500h的宽背景图像。我使用div 500 * 500包装画布以通过设置overflow:hidden来创建视口，以便首先加载背景但仅显示500w的背景，其余部分将通过使用scrollLeft属性滚动viewPort除法来显示。我添加了一个事件监听器，检查是否 - ＆gt;或＆lt; - 键被按下并相应地滚动视口。我的问题是

随着所有内容的加载和设置正确（背景图片正确加载并在画布上绘制），当我使用以下代码时

 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元素的背景，而不是使用包装器，图像和摆弄滚动条位置，您可以使用键来控制它。

请记住，将background-position设置为元素的内联样式属性非常重要，否则它将无法通过style属性提供。

示例：

此示例使用两个辅助函数，一个用于解析字符串。它将拆分两个位置并剥离＆＃34; px＆＃34;单位在最后。另一个将使用您为x提供的新位置并将其格式化回有效的css位置。

＆＃13;
＆＃13;
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"}
＆＃13;
#canvas { border: 1px solid blue; background: url(http://i.imgur.com/BoqJ7Wg.jpg) no-repeat; }
＆＃13;
<canvas style="background-position:0 0" id=canvas width=500 height=500></canvas>
＆＃13;
＆＃13;
＆＃13;

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

HTML 5画布滚动事件侦听器无法正常工作

1 个答案: