HTML-холст - рисунок исчезает при изменении размера

Я создал базовую форму в элементе холста HTML, который отлично работает.

Проблема возникает, когда я изменяю размер холста, и весь рисунок в холсте исчезает. Это нормальное поведение? или есть функция, которая может быть использована, чтобы остановить это?

Один из способов исправить это может состоять в том, чтобы снова вызвать функцию рисования при изменении размера холста, однако это может быть не очень эффективно, если есть огромный контент для рисования.

Какой лучший способ?

Вот ссылка на пример кода https://gist.github.com/2983915

Ответ 1

Вам нужно перерисовать сцену при изменении размера.

задавая ширину или высоту холста, , даже если вы устанавливаете его на то же значение, что и раньше, не только очищает холст, но и сбрасывает весь контекст холста. Любые заданные свойства (fillStyle, lineWidth, область отсечения и т.д.) Также будут reset.

Если у вас нет возможности перерисовывать сцену из любых структур данных, которые могут быть представлены на холсте, вы всегда можете сохранить весь холст, вытащив его на холст в памяти, установив исходную ширину и рисунок холст в памяти возвращается к исходному холсту.

Вот очень быстрый пример сохранения растрового изображения canvas и его возврата после изменения размера:

http://jsfiddle.net/simonsarris/weMbr/

Ответ 2

Каждый раз, когда вы изменяете размер холста, он будет reset сам прозрачным черным, как определено в спецификации.

Вам придется либо:

перерисовать при изменении размера холста или
не изменять размер холста

Ответ 3

У меня такая же проблема. Попробуйте следующий код

var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

Он сохраняет рисунок как есть

Ответ 4

Одна вещь, которая работала для меня, состояла в том, чтобы использовать requestAnimationFrame().

let height = window.innerHeight;
let width = window.innerWidth;

function handleWindowResize() {
    height = window.innerHeight;
    width = window.innerWidth;
}

function render() {
    // Draw your fun shapes here
    // ...

    // Keep this on the bottom
    requestAnimationFrame(render);
}

// Canvas being defined at the top of the file.
function init() {
    ctx = canvas.getContext("2d");

    render();
}

Ответ 5

Я также встретил эту проблему. Но после эксперимента я обнаружил, что изменение размера элемента canvas автоматически очистит все чертежи от холста! просто попробуйте код ниже

<canvas id = 'canvas'></canvas>
<script>
    var canvas1 = document.getElementById('canvas')
    console.log('canvas size',canvas1.width, canvas1.height)
    var ctx = canvas1.getContext('2d')
    ctx.font = 'Bold 48px Arial'
    var f = ctx.font
    canvas1.width = 480
    var f1 = ctx.font
    alert(f === f1) //false
</script>