在不保持比例的情况下调整画布大小

Question

In this program, I have a bit of code that changes the width of a canvas in response to a change of a slider. 在此程序中，我有一些代码可以根据滑块的变化来更改画布的宽度。 However, I noticed that the canvas resizes to maintain its aspect ratio. 但是，我注意到画布会调整大小以保持其纵横比。

Is there any way to prevent this from happening so that the canvas simply gets squished/expanded from the sides? 有什么方法可以防止这种情况的发生，从而使画布只是从侧面被挤压/展开？ Alternatively, could I make it so that the balls do not change size with the canvas and maintain their original sizes? 或者，我是否可以使球不随画布改变尺寸并保持其原始尺寸？

Code: 码：

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

Answer 1

Resizing the canvas with style should not be done unless you want to see a pixelated picture. 除非要查看像素化的图片，否则不应该使用样式调整画布的大小。

 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>

As you can see a 60 x 30 canvas when scaled via style to 280px shows a pixelated straight line. 如您所见，通过样式缩放到280px时，一块60 x 30的画布显示出像素化的直线。

But if you use canvas.width and canvas.height you can change each one independently and without interpolated pixels. 但是，如果使用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>

In this case the canvas width and height are changed independently and the stright line size is still the same. 在这种情况下，画布的宽度和高度是独立更改的，并且直线尺寸仍然相同。

height and width are properties of the canvas object (not the context). height和width是画布对象的属性（不是上下文）。

Here is a detailed fiddle with the original, resized by style and resized by properties. 这是与原始作品的详细的小提琴，按样式调整大小，按属性调整大小。

在不保持比例的情况下调整画布大小

问题描述

1 个解决方案

解决方案1
2 2016-11-28 02:42:23

在不保持比例的情况下调整画布大小

问题描述

1 个解决方案

解决方案1 2 2016-11-28 02:42:23

解决方案1
2 2016-11-28 02:42:23