时间戳

首页 > 解决方案 > 为什么这不是一个完美的正方形？

javascript - 为什么这不是一个完美的正方形？

问题描述

这是我的代码：

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 左右它就变成一个矩形

我究竟做错了什么？

标签： javascripthtml5-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>

推荐阅读