Html 画布未按预期工作_Html_Canvas

Html 画布未按预期工作

html canvas

Html 画布未按预期工作,html,canvas,Html,Canvas,我在尝试一个脚本，从潜入html5开始，在画布上绘制类似于网格的图纸。结果应该是画一个边为10px的正方形网格，但我得到的大小大约是20px，而不是精确的正方形。这是密码` <html> <head> <style> body{ margin: 20px 20px 20px 20px; } canvas{ width: 500px; h

我在尝试一个脚本，从潜入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>


身体{
保证金：20px 20px 20px 20px；
}
帆布{
宽度：500px；
身高：375px；
边框：1px实心#000；
}
函数激活（）{
var canvas=document.getElementById（“exp”）；
var context=canvas.getContext（“2d”）；
对于（var x=0.5；x您不能使用css设置画布的大小
您应该在DOM的属性中设置
<canvas width="100" height="200"></canvas>

Javascript可以为您计算。仅设置参数：
html:


js:
功能激活（id、X计数、Y计数、宽度、颜色）{
var canvas=document.getElementById（id）；
var context=canvas.getContext（“2d”）；
canvas.width=xcount*width+1；
canvas.height=ycount*width+1；
对于（变量x=0.5；x

另请参见。
您在
中缺少了一个有效的，但我不明白css是如何改变线宽的？另外，正如您所说，css没有应用到画布上，但画布仍然获得了502x377px的大小（准确地说）。为什么？css只是更改样式的宽度和高度，而不是画布的宽度和高度。画布就像图像一样，设置图像的样式宽度和高度不会更改图像的实际大小。
<canvas id="exp"></canvas>

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");