Question

在这个程序中，我有一些代码可以改变画布的宽度以响应滑块的变化。但是，我注意到画布调整大小以保持其纵横比。

有没有办法防止这种情况发生，以便画布只是从两侧挤压/扩展？或者，我可以制作它以使球不会随着画布改变尺寸并保持其原始尺寸吗？

代码：

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

除非您想要查看像素图片，否则不应该使用样式调整画布大小。

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

在这种情况下，画布宽度和高度会单独更改，而直线尺寸仍然相同。

height和width是画布对象的属性（不是上下文）。

Here是原文的详细小提琴，按样式调整大小并按属性调整大小。

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

1 个答案: