帆布宽度高度样式

Question

如何编辑宽度和高度？在右边我有：

element.style {
    width:475px;
    height:713px;
}

我正在尝试输入CSS，但它不起作用：

canvas {
    width:400px;
    height:400px;
}

这是我的问题的屏幕截图，我想要宽度和高度400px：

Answer 1

我认为问题在于你在两个不同的地方声明了canvas元素的高度和宽度：标签本身和css文件。

style属性为画布提供713px的高度和475px的宽度。可以通过更改样式属性或使用！important CSS声明覆盖HTML来更改高度和宽度：

canvas {
    display: block;
    margin: 0 auto;
    position: fixed;
    overflow: hidden;
    width: 400px !important;
    height: 400px !important;
}

使用此代码将覆盖画布的高度和宽度，如canvas元素的style属性中所定义。

Answer 2

删除应用于canvas元素的内联样式。这将覆盖您的CSS文件，因为它直接在元素上。看看这个小提琴，以便更好地理解CSS级联：http://jsfiddle.net/Ex9Lc/

你会注意到CSS＆＃34;文件＆＃34;中只有一个画布元素被调整大小。这是因为另一个元素在元素本身上内嵌了CSS。

想想这样......浏览器要做的第一件事就是检查canvas元素的默认样式并应用它们。然后它将查看CSS文件和<style>声明中声明的所有样式并应用这些样式...然后它将查看任何style=""的元素本身并应用这些样式。