Как избежать автоматического растягивания HTML Canvas

Question

У меня есть следующий фрагмент HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

Проблема в том, что нарисованное изображение автоматически растягивается (изменяется) пропорционально размеру холста.Я попытался использовать все доступные параметры (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)), но это не помогло.

Что вызывает растяжение моего рисунка и как я могу это предотвратить?

Спасибо,Том

Answer 1

Вам нужны атрибуты width и height в элементе canvas. Они определяют координатное пространство для холста. По-видимому, по умолчанию используется холст с соотношением сторон 2: 1, который ваш CSS смещает в квадрат.

Answer 2

Стоит отметить, что атрибуты ширины и высоты холста не , как атрибуты ширины и высоты старой школы . Они не являются заменой CSS. Они указывают, сколько пикселей должен иметь пиксельный буфер на холсте, и если вы не примените к нему размер с помощью css, css будет подразумевать его размер из этой формы этого пиксельного буфера. Установка размера элемента в css не устанавливает размер пиксельного буфера - он изменяет его размер. С точки зрения CSS, - это то же самое, что и .

Answer 3

Хорошо, немного проще (и легче), чем JQuery .. JAVASCRIP САМОЕ, конечно!

Если вам нужно динамически изменять размеры холста, просто используйте:

document.getElementById('yourcanvasid').setAttribute('width', aWidth);
document.getElementById('yourcanvasid').setAttribute('height', aHeight);

Answer 4

Если вы используете JQuery, вы не должны устанавливать CSS (как указано выше)Вам нужно установить атрибут так:

$("canvas").attr('width', aWidth);
$("canvas").attr('height', aHeight);

отлично работает.

Answer 5

Мне было проще просто поместить цикл while, ожидающий тайм-аут в мой цикл анимации, например:

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}