Сделать HTML-холст как источник изображения соответствующим соотношению сторон? - PullRequest
Новая
       43

Сделать HTML-холст как источник изображения соответствующим соотношению сторон?

0 голосов
/ 30 декабря 2018

В настоящее время я пытаюсь создать приложение pictionary на 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 на общих и мобильных:

general: 

#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;
    }

mobile: 

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

Если бы холст должен был растягиваться на мобильном, это было бы хорошо, но сейчас это разница:

как эторисуется в браузере компьютера

против

как это отображается на мобильном телефоне (телефон находится в альбомном режиме)

Такхолст загружается в полном размере

Заранее спасибо,

Aap.

1 Ответ

0 голосов
/ 30 декабря 2018

Я нашел ответ в методе .drawImage context.

4-й и 5-й параметры можно использовать для изменения масштаба холста следующим образом: 

  if (isMobile){
        ctx.drawImage(canvasImage, 0,0,canvasImage.width*(window.innerWidth / (canvasImage.width/0.525)),canvasImage.height*(window.innerHeight/(canvasImage.height/0.9)));
    } else {
        ctx.drawImage(canvasImage, 0, 0);
    }
...