0

在我的测试页面[link removed]上，应该有一系列从正方形右上角向外辐射的线（左侧垂直矩形是一个侧边栏，将用于不相关的内容）。使用右上角作为极坐标图的原点，线条从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>
4

1 回答 1

0

Apparently setting the width and height of the canvas using the built-in attributes width and height solved this problem. My question regarding this detail has been answered here: Canvas is stretched when using CSS but normal with "width" / "height" properties

于 2012-04-26T19:42:00.997 回答