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

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

height canvas css html javascript

Alex Barbosa · 技术社区 · 4 年前

#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 年前

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

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前