Изменить размер элемента HTML5 canvas

Question

Как мне добиться того, чтобы элемент HTML5 canvas можно было изменять по размеру?

Я хотел бы реализовать этот элемент, чтобы вы могли масштабировать его в любом размере. Событием масштабирования должна быть мышь, которая щелкает по краю, а пользователь изменяет размер элемента.

Я уже читал о том, как этого можно добиться на объекте в элементе canvas. Но в моем случае это необходимо для самого элемента canvas (<canvas>).

Answer 1

Установка свойств ширины или высоты холста приводит к очистке холста.Четный canvas.width = canvas.width;заставит вас потерять все на холсте.Иногда это желательно, но в вашем случае, вероятно, нет.

Что вам, вероятно, понадобится сделать, это примерно так:

 var myCanvas = document.getElementById('myCanvas');
 var tempCanvas = document.createElement('canvas');
 tempCanvas.width = myCanvas.width;
 tempCanvas.height = myCanvas.height;

 // save your canvas into temp canvas
 tempCanvas.getContext('2d').drawImage(myCanvas, 0, 0);

 // resize my canvas as needed, probably in response to mouse events
 myCanvas.width = newWidth;
 myCanvas.height = newHeight;

 // draw temp canvas back into myCanvas, scaled as needed
 myCanvas.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, myCanvas.width, myCanvas.height);

В большинстве браузеров масштабирование выполняется с помощью алгоритма бикубического масштабирования, в результате чего оно становится размытым.В некоторых случаях вы можете установить свойство CSS, чтобы вызывать ближайшего соседа на холсте, если хотите, но поддержка браузера для этого очень неочевидна.Вместо этого вы можете вручную выполнить масштабирование ближайшего соседа, как показано в этом вопросе: Как растянуть изображения без сглаживания

Альтернативный подход CSS

Другой подход заключается в масштабировании холстаиспользуя CSS.В Chrome / Safari / IE вы можете просто сделать:

<canvas style="zoom:200%" />

В Firefox вы можете использовать масштабное преобразование для достижения того же эффекта:

<canvas style="-moz-transform:scale(2)" />

Во многих отношениях этот подходпроще, но у него есть свои небольшие ошибки и специфические особенности браузера.

Answer 2

Я думаю, вам нужно привязать событие onresize к вашему телу документа.

Затем внутри события вам нужно изменить размер холста, используя window.innerWidth и window.innerHeight.

Посмотрите @ http://kile.stravaganza.org/lab/js/canvas_resize/ (просмотреть исходный код)

Answer 3

Хотя немного поздно ответить на этот вопрос, я хотел бы поделиться тем, что я нашел, чтобы решить тот же вопрос.Посмотрите, пожалуйста.

panel.css

#Panel {
width:  100%;
height: 30%;
}

app.js

var widthG = 0, height=G = 0;
function updateScale() {
    widthG  = parseInt($('#Panel').width());
    heightG = parseInt($('#anel').height());
}
...

function updateCanvas() {
    ctx = $('#canvas').get(0).getContext('2d');
    ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
    ctx.canvas.width = widthG;
    ctx.canvas.width = heightG;
}

Я также пытался переназначить эти свойства с помощью синтаксиса css, ноэто не работает.

$('#canvas').width(panelW);
$('#canvas').height(panelH);      

Надеюсь, это поможет людям, пострадавшим от того же вопроса.