画布未按预期工作

发布于 2025-01-06 10:43:10 字数 1380 浏览 4 评论 0原文

我正在尝试使用一个脚本在画布上绘制像网格一样的方格纸，深入研究 html5。结果应该绘制一个边长为 10px 的正方形的网格，但我得到的大小约为 20px，而不是精确的正方形。
这是代码，`

   <html>
      <head>     
           <style>
    body{
        margin: 20px 20px 20px 20px;
    }

    canvas{
        width: 500px;
        height: 375px;
        border: 1px solid #000;
    }
    </style>
    <script type="text/javascript">
        function activate(){
            var canvas =document.getElementById("exp");
            var context = canvas.getContext("2d");

            for (var x=0.5;x<500;x+=10){
                context.moveTo(x,0);
                context.lineTo(x,375);
                console.log(x);
            }

            for (var y=0.5;y<375;y+=10){
                context.moveTo(0,y);
                context.lineTo(500,y);
            }

            context.strokeStyle="#000";
            context.stroke();
        }
    </script>
</head>

<body>
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas>
</body
     </html>

这是输出：
canvas returned
而实际输出应该是：
actual canvas
注意：我不担心色差。我不明白的是为什么两行之间的间距是〜20px（通过firefox上的测量工具检查）而不是10px。
另外，在打印 x 的值时，它给出了正确的值（即每次增加 10）。

原文

I was trying a script to draw graph paper like grids on the canvas from dive into html5. The result is supposed to draw a mesh with squares of side 10px but i'm getting the size as approximately 20px, and not exact squares.
Here is the code,`

   <html>
      <head>     
           <style>
    body{
        margin: 20px 20px 20px 20px;
    }

    canvas{
        width: 500px;
        height: 375px;
        border: 1px solid #000;
    }
    </style>
    <script type="text/javascript">
        function activate(){
            var canvas =document.getElementById("exp");
            var context = canvas.getContext("2d");

            for (var x=0.5;x<500;x+=10){
                context.moveTo(x,0);
                context.lineTo(x,375);
                console.log(x);
            }

            for (var y=0.5;y<375;y+=10){
                context.moveTo(0,y);
                context.lineTo(500,y);
            }

            context.strokeStyle="#000";
            context.stroke();
        }
    </script>
</head>

<body>
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas>
</body
     </html>

And this is the output:
canvas rendered
while the actual output should be:
actual canvas
Note: i'm not worried about the color difference. what i don't understand is why the space between 2 lines is ~20px(as checked by a measurement tool on firefox) instead of 10px.

Also, on printing the values of x, it gives the right value(i.e. incremented by 10 each time).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开半夏魅人心 2025-01-13 10:43:10

你不能用CSS设置画布的大小
你应该在 DOM 的属性中设置。

<canvas width="100" height="200"></canvas>

you can not set the canvas' size with css
you should set in the DOM's attribute.

<canvas width="100" height="200"></canvas>

回复收藏 0 原文

魂牵梦绕锁你心扉 2025-01-13 10:43:10

JavaScript 可以帮你计算。仅设置参数：

html:

<canvas id="exp"></canvas>

js:

function activate(id, xcount, ycount, width, color) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");

    canvas.width = xcount * width + 1;
    canvas.height = ycount * width + 1;

    for (var x = 0.5; x < canvas.width; x += width) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
    }

    for (var y = 0.5; y < canvas.height; y += width) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
    }

    context.strokeStyle = color;
    context.stroke();
}
activate("exp", 37, 50, 10, "#ccc");

另请参阅此示例。

Javascript can calculate for you. Only set the parameters:

html:

<canvas id="exp"></canvas>

js:

function activate(id, xcount, ycount, width, color) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");

    canvas.width = xcount * width + 1;
    canvas.height = ycount * width + 1;

    for (var x = 0.5; x < canvas.width; x += width) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
    }

    for (var y = 0.5; y < canvas.height; y += width) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
    }

    context.strokeStyle = color;
    context.stroke();
}
activate("exp", 37, 50, 10, "#ccc");

Also see this example.

回复收藏 0 原文

~没有更多了~