调整画布大小而不保持比例

在此程序中，我有一些代码可以更改画布的宽度以响应滑块的更改。但是，我注意到画布调整大小以保持其宽高比。调整画布大小而不保持比例

有什么办法可以防止这种情况发生，以至于画布从侧面被简单地挤压/展开？或者，我可以做到这一点，使球不会改变画布的大小，并保持原来的大小？

代码：

<!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是画布对象（而不是上下文）的属性。

Here是一个与原来的细节小提琴，调整风格和调整大小的属性。

来源

2016-11-28 02:42:23

调整画布大小而不保持比例

回答

相关问题