Question

这是我的代码：

let pixelSize = 5;
let width = 100;
let height = 100;

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i = 0; i < height; i++) {
        for (var j = 0; j < width; j++) {

            ctx.fillStyle = 'rgb(' + Math.floor(255 - 30 * i) + ', ' +
                Math.floor(255 - 30 * j) + ', 0)';

            ctx.fillRect(j * pixelSize, i * pixelSize, pixelSize, pixelSize);
        }
    }
}
draw();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    canvas{
        height: 100%;
        width: 100%;
    }
</style>
<canvas id="canvas"></canvas>
</body>

<script src="mandelbrot.js"></script>
</html>

我希望它能绘制一个完美的正方形，但它不会

如果我将宽度和高度设置为大约10 x 10，则它是一个正方形但是一旦我超过80左右，它就会变成一个矩形

我在做什么错了？

Answer 1

您遇到的问题是您的画布尺寸太小，并且将图像裁剪到该尺寸。您正确绘制了像素，它位于画布的边界之外。尝试将canvas元素的宽度和高度设置为足以容纳图像的宽度：

let pixelSize = 5;
let width = 100;
let height = 100;

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i = 0; i < height; i++) {
        for (var j = 0; j < width; j++) {

            ctx.fillStyle = 'rgb(' + Math.floor(255 - 30 * i) + ', ' +
                Math.floor(255 - 30 * j) + ', 0)';

            ctx.fillRect(j * pixelSize, i * pixelSize, pixelSize, pixelSize);
        }
    }
}
draw();

<canvas id="canvas" width="500px" height="500px"></canvas>

为什么不将其绘制为完美正方形？

1 个答案: