Question

在我的测试页面上， [已删除链接] ，应该有一系列从正方形的右上角辐射的线条（左侧垂直矩形是一个侧边栏，将是用于不相关的东西）。使用右上角作为极坐标地图的原点，这些行从theta = pi转到3pi/2。

然而，看起来画布被放大了，因为我（和我的一个朋友）可以看到的是一些大而模糊的线条，就像它放大到左上角一样。没有扩展，我正在使用jCanvas，一个用于Canvas对象的jQuery插件。如果我输出坐标，当我将它绘制在纸上时，它们就会与它们应该是一致的。

问题是什么？

这是我的代码：

<script>

var gradations_theta, theta, this_x1, this_y1, this_x2, this_y2, start_r, end_r;
gradations_theta = 24;
start_r = 20;   // 20 pixels from center of galaxy
end_r  = 800;   // 800 pixels from center of galaxy (to corners west and south of center)

$(function() {
    for (theta = Math.PI; theta <= (Math.PI * 3 / 2); theta += (Math.PI / (gradations_theta * 2))) {

        this_x1 = Math.floor(800 + (start_r * Math.cos(theta)));
        this_y1 = Math.floor(Math.abs(start_r * Math.sin(theta)));
        this_x2 = Math.floor(800 + (end_r * Math.cos(theta)));
        this_y2 = Math.floor(Math.abs(end_r * Math.sin(theta)));

        $('#space-map')
        .restoreCanvas()
        .drawLine({
            strokeStyle: '#fff',
            strokeWidth: 1,
            x1: this_x1,
            y1: this_y1,
            x2: this_x2,
            y2: this_y2
        });

    }
});

</script>

Answer 1

使用内置属性canvas和width显然设置height的宽度和高度解决了这个问题。我在这里已回答了有关此详细信息的问题：Canvas is stretched when using CSS but normal with "width" / "height" properties

为什么我的径向网格地图放大了这么多？

1 个答案: