Question

我目前正在尝试使用HTML / CSS / PHP创建一个虚构的应用程序，并且在制作完该应用程序后，我试图使其变得移动友好/响应迅速。

我显示在其他玩家的屏幕上绘制的画布的方式是：

javascript

let canvas = document.querySelector("canvas");
    let base64dotpng = canvas.toDataURL();
    ws.send("canvas:" + base64dotpng);

我通过网络套接字发送。这工作得很好，当我像这样读回数据时：

let ctx = document.querySelector("canvas").getContext('2d');
let canvasImage = new Image();
canvasImage.src = msg;
if (newRound) {
    ctx.clearRect(0, 0, window.innerWidth * 0.525, window.innerHeight * 0.90);
}
ctx.drawImage(canvasImage, 0, 0);

但是，现在无论何时在移动设备上加载画布时，我都会实现移动版本，但画布的比例有所不同，并且不会加载完整图像。

css

这是我在普通版和移动版上的CSS：

一般：

#drawingCanvas {
        display: inline-block;
        background-color: white;
        border-width: 0.3vh;
        border-color: black;
        border-style: solid;
        position: absolute;
        height: 90vh;
        top: 5vh;
        left: 20vw;
        width: 52.5vw;
    }

手机：

canvas#drawingCanvas {
            z-index: 1;
            top: 0;
            margin-left: -20%;
            display: inline-block;
            width: 52.5%;
            height: 99%;
        }

如果要在移动设备上拉伸画布是可以的，但是现在区别在于：

how it is being drawn on a computer browser

vs

how it is getting displayed on mobile （手机处于横向模式）

因此画布似乎正以原尺寸加载

预先感谢

Aap。

Answer 1

我在.drawImage的{{1}}方法中找到了答案。

第4和第5个参数可用于重新调整画布，如下所示：

context

使HTML画布作为图像源适合宽高比？

1 个答案: