时间戳

首页 > 解决方案 > 使用 Javascript 创建一个非常大的可滚动（通过按住鼠标右键）Canvas

javascript - 使用 Javascript 创建一个非常大的可滚动（通过按住鼠标右键）Canvas

问题描述

我已经为此苦苦挣扎了很长时间（6个月以上）。我的问题有一些部分答案，但我无法将可用的答案位放在一起，以便能够用它做任何有用的事情。对于所有有抱负的简单画布游戏新开发者来说，这段代码将是一个了不起的工具，并且肯定会极大地造福于社区。

- 我需要创建一个非常大的可滚动画布（通过按住鼠标右键滚动），类似于：https ://www.desmos.com/calculator ，比如说 50k px x 50k px，这个（大小）应该可以修改代码。

-当我们滚动时，背景会移动，当然所有项目都需要随着滚动而移动。

- 代码中必须有一些滚动率的度量，这应该是可修改的。

- 渲染结构需要保持在我的代码笔中 - 在屏幕上生成简单的构造函数对象，然后使用请求动画帧进行渲染。 https://codepen.io/alexhermanuk/pen/bGGXLZG

var squares = [];

var Square = function(x,y,w,h,color){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;


}

Square.prototype.update = function(){
this.draw();

}

Square.prototype.draw = function(){

context.save();
context.beginPath();
context.fillStyle = this.color;
context.fillRect(this.x,this.y,this.w,this.h)
context.closePath();
context.restore();

}

for(var i=0; i<10; i++){
squares.push(new Square(width*Math.random(),height*Math.random(),100,100,"red"));
}


function animateEverything(){

    context.clearRect(0,0,width,height);
        context.save()
            squares.forEach(Square => {Square.update(squares)})
                requestAnimationFrame(animateEverything);

}

animateEverything();

}

- 画布/可滚动区域需要全屏无溢出

- 画布背景将包含 4 个几乎相同的方形图像（2 个主图像和 2 个镜像），当我们左右滚动时，这些图像被渲染/复制为背景，并将创建无限的背景图像（在我们的例子中是只是波涛汹涌的海洋）。所以，这些必须像某种瓦片地图一样在逻辑上呈现......没有简单的方法来提供示例图像，所以请带上你的。

我感谢您的努力，并提前感谢所有人。

标签： javascriptcanvashtml5-canvas

解决方案

干得好。它通过“右键单击”拖动滚动。

我不确定你所说的滚动率是什么意思。您想要显示或控制滚动速率吗？无论如何，为了安全起见，我都做了。scrollRate控件的滚动速度很快，默认为 1。scrollMeter是一个粗略地表示画布滚动速度的数字。它印在画布的左上角。

关于平铺，我做了一个 BackgoundTile 类。您可以创建 4 个不同的瓷砖x, y，并x_gap, y_gap拥有您想要的。但是，如果您关心性能，而不是制作 4 个平铺对象，只需使用一个组合图像即可。如果可能，使用图像编辑器将 4 个正方形组合成一个大正方形。平铺几乎总是一项性能繁重的工作，一些优化还有很长的路要走。

我还添加了一个窗口/画布调整大小处理程序，因此纵横比不会失控。当您放大窗口/画布时，这也可以防止画布变为低​​分辨率。

我animateEverything原样离开，但我建议为渲染添加更多控制，而不是无限期地递归调用它。

我希望你喜欢这个演示。

代码笔

推荐阅读