比率を維持しないキャンバスのサイズ変更

このプログラムでは、スライダの変更に応じてキャンバスの幅を変更するコードが少しあります。しかし、キャンバスがアスペクト比を維持するようにサイズ変更されていることに気付きました。比率を維持しないキャンバスのサイズ変更

これが起こらないようにする方法はありますか？キャンバスが単に側から盛り付けられたり拡張されたりすることはありませんか？あるいは、ボールがキャンバスでサイズを変えず、オリジナルのサイズを維持できるようにすることはできますか？

コード：あなたがピクセル化画像を見たいと思っていない限り

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

280pxにスタイル経由でスケーリングしたときは、60×30キャンバスを見ることができるようにピクセル化された直線を示しています。

ただし、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>

は、独立して変更され、strightラインサイズは同じです。

heightおよびは、（コンテキストではなく）キャンバスオブジェクトのプロパティです。

Hereは、オリジナルの詳細なフィドルで、スタイルによってサイズ変更され、プロパティによってサイズが変更されます。

出典

2016-11-28 02:42:23

比率を維持しないキャンバスのサイズ変更

答えて

関連する問題