resize canvas images

Question

Мне было интересно, как изменить размер холста и всех его рисунков при изменении размера экрана. Я знаю, что это возможно на 100% по мере того, как эта игра делает (измените размер вашего браузера, и он будет соответствовать любому соотношению).

http://html5games.com/Game/Smarty-Bubbles/d8f24956-dc91-4902-9096-a46cb1353b6f

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

Answer 1

1. В начале приложения сохраните начальную ширину окна и размер начала холста.

   var originalWindowWidth=window.innerWidth; 
   var canvas=document.getElementById('canvas'); 
   var originalCanvasWidth=canvas.width; 
   var originalCanvasHeight=canvas.height; 
   

2. Прислушайтесь окном изменения размера события

3. Вычислить, сколько шириной окна измененных

   scale=window.innerWidth/originalWindowWidth; 
   

Если содержание холста полный & неизменен, вы можете изменить масштаб ваш холст с помощью CSS. Таким образом, вам не нужно перерисовывать содержимое холста.

4a. (Вариант # 1) Масштабирование с помощью CSS:

// rescale both CSS width & height by the SAME SCALE FACTOR 
$('#canvas').css('width',originalCanvasWidth*scale); 
$('#canvas').css('width',originalCanvasWidth*scale); 

Если содержание холста не полный & неизменного, вы должны изменить масштаб вашего самого холста элемента. Это приводит к потере всего содержимого холста, поэтому вы должны его перерисовать. Вы можете использовать команду context.scale для автоматического перерисовки содержимого по новому масштабному коэффициенту. Использование этого метода также с меньшей вероятностью приведет к пиксельному контенту и изменению размера с помощью CSS, который «растягивается» & «сжимает» существующие пиксели, чтобы соответствовать новому размеру CSS.

4b. (Вариант № 2) Масштаб самого холста элемент

var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 

    canvas.width=originalCanvasWidth*scale; 
    canvas.height=originalCanvasHeight*scale; 

    context.scale(scale,scale); 

    // now reissue all the drawing commands 
    // (no need to adjust coordinates or sizes -- context.scale does that for you!