調整畫布大小而不保持比例

在此程序中，我有一些代碼可以更改畫布的寬度以響應滑塊的更改。但是，我注意到畫布調整大小以保持其寬高比。調整畫布大小而不保持比例

有什麼辦法可以防止這種情況發生，以至於畫布從側面被簡單地擠壓/展開？或者，我可以做到這一點，使球不會改變畫布的大小，並保持原來的大小？

代碼：

<!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

調整畫布大小而不保持比例

回答

相關問題