Изменение размера холста без сохранения пропорций

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

Есть ли способ предотвратить это, чтобы холст просто сжимался/расширялся с боков? В качестве альтернативы, могу ли я сделать так, чтобы шары не изменяли размер с холстом и сохраняли свои первоначальные размеры?

Код:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <style> 
    </style> 
    <body> 
     <canvas id="my_canvas" width="600px" height="300px"></canvas> 
     <script> 
      var canvas = document.getElementById("my_canvas"); 
      var c = canvas.getContext("2d"); 

      //create ball container 
      var container = { 
       x: 0, 
       y: 0, 
       width: 600, 
       height: 300 
      }; 

      //make balls array 
      var balls = [{ 
       x: 50, 
       y: 100, 
       r: 20, 
       vx: 10, 
       vy:10, 
       color: 125 
      }, { 
       x: 150, 
       y: 80, 
       r: 20, 
       vx: 10, 
       vy: 10, 
       color: 105 
      }, { 
       x: 90, 
       y: 150, 
       r: 20, 
       vx: 10, 
       vy: 10, 
       color: 20 
      }, { 
       x: 100, 
       y: 50, 
       r: 20, 
       vx: 10, 
       vy: 10, 
       color: 80 
      }]; 

      function animate() { 
       //draw container 
       c.fillStyle = "#000000"; 
       c.fillRect(container.x, container.y, container.width,  container.height); 

       //loop balls array 
       for (var i = 0; i < balls.length; i++) { 
        //draw balls 
        c.fillStyle = 'hsl(' + balls[i].color++ + ', 100%, 50%)'; 
        c.beginPath(); 
        c.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true); 
        c.fill(); 

        //animate balls 
        if (balls[i].x - balls[i].r + balls[i].vx < container.x || balls[i].x + balls[i].r + balls[i].vx > container.x + container.width) { 
         balls[i].vx = -balls[i].vx; 
        } 

        if (balls[i].y + balls[i].r + balls[i].vy > container.y + container.height || balls[i].y - balls[i].r + balls[i].vy < container.y) { 
         balls[i].vy = -balls[i].vy; 
        } 

        balls[i].x += balls[i].vx; 
        balls[i].y += balls[i].vy; 
       } 
       requestAnimationFrame(animate); 
      } 
      requestAnimationFrame(animate); 

      function myFunction() { 
       document.getElementById("my_canvas").style.width = document.getElementById("VolumeInputId").value + "px"; 
      } 
     </script> 
     <form name = "volume"> 
      <label for="volume">Volume</label> 
      <input type="range" name="VolumeInputName" id="VolumeInputId" value=600 min="300" max="600" onchange="myFunction()"> 
      <output name="VolumeOutputName" id="VolumeOutputId"></output> 
     </form> 
    </body> 
</html>

источник

2016-11-28 Honors Level Maker

Изменение размера холста со стилем не должно быть сделано, если вы не хотите, чтобы увидеть пикселизированной картину.

var canvas = document.getElementById("my_canvas"); 
 
var c = canvas.getContext("2d"); 
 

 
c.beginPath(); 
 
c.moveTo(0,0); 
 
c.lineTo(30,30); 
 
c.stroke(); 
 

 
document.getElementById("my_canvas").style.width = "280px";

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="my_canvas" width="60px" height="30px"></canvas>

Как вы можете увидеть 60 х 30 холст при масштабировании с помощью стиля 280 пикселей показывает пикселизированной прямую линию.

Но если вы используете canvas.width и canvas.height, вы можете изменить каждый из них независимо и без интерполированных пикселей.

var canvas = document.getElementById("my_canvas"); 
 
var c = canvas.getContext("2d"); 
 

 
canvas.width = 280; 
 
canvas.height = 200; 
 

 
c.beginPath(); 
 
c.moveTo(0,0); 
 
c.lineTo(30,30); 
 
c.stroke();

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="my_canvas" width="60px" height="30px"></canvas>

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

height и width - свойства объекта canvas (а не контекста).

Here - подробная скрипка с оригиналом, измененная по стилю и измененная по свойствам.

источник

2016-11-28 02:42:23

Изменение размера холста без сохранения пропорций

ответ

Смежные вопросы