Размеры HTML-холста верны, но контекст использует значения по умолчанию

У меня есть элемент canvas внутри div на странице HTML. Я установил его ширину и высоту с помощью CSS на 100% родительского div, и он устанавливает их правильно. Я определил функцию "рисования" и использую ее следующим образом: <body onload="draw();">, И это реализовано так:

function draw() {
    var cm = 6; // canvas margin

    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}

Теперь: консоль печатает реальные и правильные значения ширины и высоты холста (в частности, 381 и 188); но кажется, что контекст рисуется так, как если бы холст имел размеры по умолчанию... на самом деле, если я просто установлю w = 330; h = 150; все работает как положено, но потом холст растягивает рисунок и я не удовлетворен результатом.

Что я могу сделать, чтобы контекст использовал правильные размеры холста? Я хотел перерисовывать изображение каждый раз, когда размер холста изменяется, но я верю, что нет никакого изменения размера любого div, я прав?

Спасибо.

Источник

2 ответа

Решение

И сам холст, и элемент холста имеют ширину и высоту, это разные вещи. Если они не совпадают, содержимое холста автоматически масштабируется для соответствия элементу. Если вы хотите соотношение 1:1, вам нужно установить фактическое width а также height из canvas,

Сразу после:

var w = c.offsetWidth;
var h = c.offsetHeight;

добавлять

c.width = w;
c.height = h;

Пример:

function draw() {
    var cm = 6; // canvas margin
    
    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;
        c.width = w;
        c.height = h;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}
draw();
.parent {
  width: 200px;
  height: 200px;
  position: relative;
}
.parent canvas {
  width: 100%;
  height: 100%;
}
<div class="parent">
  <canvas class="container"></canvas>
</div>
<div id="status"></div>

Источник

Я использовал холст некоторое время, вместо того, чтобы установить его на 100% в CSS, установить его на 100% с помощью Javascript

РЕДАКТИРОВАТЬ:

Я не заметил, что вы хотите установить его на 100% div родителей, это должно сделать это

Пожалуйста, попробуйте это:

var canvas = document.getElementById("canvas");
canvas.width = canvas.parentElement.offsetWidth; //set canvas width to its parent width
canvas.height = canvas.parentElement.offsetHeight;//set canvas height to its parent height
var ctx = canvas.getContext("2d");

это установит ширину и высоту холста, чтобы соответствовать его ширине и высоте.

Пожалуйста, дайте мне знать, если это решит вашу проблему!

Источник
Другие вопросы по тегам