Question

我对javascript中使用canvas的html5游戏有疑问。

我希望播放器显示的画布包含1920的canvas.width，或1080的canvas.height，以便看不到填充。这意味着如果玩家用其他比例调整屏幕大小，我不想保持（最佳）游戏比例16/9，但我想保持视口比率16/9以避免拉伸（使用画布。风格。***）

让我举一个具有可调整大小的屏幕（window.innerWidth = 500和window.innerHeight = 1600）的玩家的例子，如1600/500＆gt; 1920/1080，我希望玩家可以看到1920的游戏宽度和＆＃34;小于1080＆＃34; 的游戏高度，防止视口拉伸。

Agar.io是另一个很好的例子。

非常感谢！

Answer 1

适合但如果方面不匹配，则会在侧面或顶部底部留下空白区域。

var scale = Math.min(innerWidth / canvas.width, innerHeight / canvas.height);

或填充，但如果方面不匹配则剪辑画布

var scale = Math.max(innerWidth / canvas.width, innerHeight / canvas.height);

用于显示1600乘500和画布1920乘1080

1600 / 1920 = 0.8333;
500 / 1080 = 0.463;

因此适合画布将0.463 * (1920,1080) = (889,500)侧面为空

并填充画布将0.8333 * (1920,1080) = (1600,900)剪裁为顶部和底部。

有关比例和适合度的更多信息，请参见下文。

如果要缩放以填充画布，则需要考虑剪裁区域并找到画布左上角的偏移量（这将在页面外）。

var leftOffset = 0;
var topOffset = 0;
var canW = scale * canvas.width;
var canH = scale * canvas.height;
if(canW > innerWidth ){
    leftOffset = ((canW - innerWidth) / canW) * 1920 / 2;
}else
if(canH > innerHeight ){
    topOffset = ((canH - innerHeight) / canH) * 1080 / 2;
}

您的画布将填充页面innerWidth和innerHeight，但您需要偏移所有渲染。这可以通过将变换设置为正确的偏移

来完成

ctx.setTransform(1,0,0,1,-leftOffset, -topOffset);

画布显示尺寸为

canvas.style.width = innerWidth + "px"; 
canvas.style.height = innerHeight + "px";

并且画布分辨率为

canvas.width = 1920 - (leftOffset * 2);
canvas.height = 1080 - (topOffset * 2);

以下是代码的实例。非常懒惰的编码，只是为了显示它的工作应该真的不会创建和销毁调整大小的画布。另外as fiddle因为它具有可调整大小的面板以进行测试。

＆＃13;

 var canvas;
var createCanvas = function(){
    if(canvas !== undefined){
         document.body.removeChild(canvas);
    
    }
    var canWidth = 1920;
    var canHeight = 1080;

    var scale = Math.max(innerWidth /canWidth, innerHeight / canHeight);
    var leftOffset = 0;
    var topOffset = 0;
    var canW = scale * canWidth;
    var canH = scale * canHeight;
    if(canW > innerWidth ){
        leftOffset = ((canW - innerWidth) / canW) * canWidth / 2;
    }else
    if(canH > innerHeight ){
        topOffset = ((canH - innerHeight) / canH) * canHeight / 2;
    }

    canvas = document.createElement("canvas");
    canvas.style.position = "absolute";
    canvas.style.top = "0px";
    canvas.style.left = "0px";
    canvas.style.width = innerWidth + "px"; 
    canvas.style.height = innerHeight + "px";
    canvas.width = canWidth - (leftOffset * 2);
    canvas.height = canHeight - (topOffset * 2);
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");


    ctx.setTransform(1,0,0,1,-leftOffset, -topOffset);
    ctx.beginPath();
    ctx.arc(canWidth / 2, canHeight/2, 400,0,Math.PI * 2);
    ctx.stroke();
}

window.addEventListener('resize',createCanvas);
createCanvas();

＆＃13;

缩放以适合

意味着整个图像将是可见的，但如果图像与画布不同，则可能在侧面或顶部和底部有一些空白空间。该示例显示缩放以适合的图像。两侧的蓝色是由于图像与画布不同的事实。

缩放以填充

表示缩放图像，以便图像覆盖所有画布像素。如果图像方面与画布不同，则图像的某些部分将被剪裁。该示例显示缩放以填充的图像。请注意图像的顶部和底部不再可见。

示例缩放以适合

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

示例缩放以填充

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

两个功能之间唯一的区别就是获得规模。拟合使用最小拟合比例将填充使用最大拟合比例。

调整大小的画布 - 保持最大宽度或高度而不拉伸/填充

1 个答案:

示例缩放以适合

示例缩放以填充