代码之家  ›  专栏  ›  技术社区  ›  Alex Barbosa

在HTML中设置宽度/高度不同于CSS中的设置

  •  0
  • Alex Barbosa  · 技术社区  · 4 年前

    Breakout Tutorial

    #myCanvas{
    width: "480";
    height: "320";
    }
    

    但是,如果我将html中的代码更改为

        <canvas id = "myCanvas" width ="480" height="320">    
    </canvas>
    

    Here is a JSfiddle of the box with the right size.

    1 回复  |  直到 4 年前
        1
  •  0
  •   njank    4 年前

    内联标记(id、class、width、height、style等)和css属性(width、height、font size等)之间存在差异。

    例如

    #myCanvas{
      width: 480px;
      height: 320px;
    }
    

    您还可以使用“样式”属性添加css内联:

    <canvas id = "myCanvas" style = "width: 480px; height: 320px">   
    
        2
  •  0
  •   Gopi    4 年前

    <canvas id = "myCanvas" style = "width: 480px; height: 320px"> 
    

    这与canvas的CSS样式中的宽度和高度不同。

    myCanvas{ width: 480px;  height: 320px; 
    

    更改了代码以更好地理解。

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath();
    ctx.rect(10, 10, 30, 20);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
    
    ctx.beginPath();
    ctx.arc(30, 80, 20, 0, Math.PI*2, false);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.closePath();
    
    ctx.beginPath();
    ctx.rect(10, 140, 30, 40);
    ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
    ctx.stroke();
    ctx.closePath();
    canvas { 
             background:#eee; border:1px solid #ccc; 
             width:200px; 
             height:300px 
    }
    <canvas id="myCanvas" width="100" height="200"></canvas>