如何通过JavaScript动态更改画布的样式大小？

画布的大小（宽度和高度）可以更改，但画布的样式大小不能动态更改

canvas = document.getElementById('test_fabric');
ctx = this.canvas.getContext('2d');
canvas.style.width = 1000;  // does not work.
canvas.style.height = 260;  // does not work.
canvas.width = 100;  // works.
canvas.height = 100;  // works.

---

canvas.width和canvas.height都工作正常，但canvas.style.width和canvas.style.height都不工作

在我的例子中，画布的样式大小只能通过css文件或画布的内联样式来更改

canvas#test_fabric {
  width:400px;
  height:400px;
  background:gold;
}

或

注意：当内联样式存在时，css文件将无效

---

通过JavaScript动态更改画布样式大小的方法是什么？

样式属性的宽度和高度需要测量其值，而html属性的宽度和高度不需要。因此，您需要在代码中明确设置

px、em或%

等：

canvas = document.getElementById('test_fabric');
ctx = canvas.getContext('2d');
canvas.style.width = '1000px'; // explicitly setting its unit 'px'
canvas.style.height = '260px';

---

style.width/height with unit是无效的css规则。

我使用了jQuery，它使用

css

方法进行高度和宽度设置：

$（文档）.ready（函数（）{
$（“#测试纤维”）.css({
“边框颜色”：“C1E0FF”，
“边框宽度”：“1px”，
“边框样式”：“实心”，
“高度”：“500px”，
“宽度”：“500px”
});
});

对不起，我的意思是：您是否尝试过指定CSS长度单位，例如“px”

canvas.style.width=“1000px”

我尝试使用“canvas.setAttribute（'width'，'500'）；”和“canvas.setAttribute（'height'，'500'）；”，它们在定义没有样式的canvas标记时不起作用，在定义有样式的canvas标记时，Chrome报告一条消息：“[仅报告]拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style src'self'”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-8qEYHk4WwsvJKgLquQfLnw2DRoaMh4sWGNj24adrRLQ='）或nonce（'nonce-…'）。因此……您忽略了我的建议，忽略了下面的答案，它说的是同样的事情，相反，你现在评论的是其他一些不起作用的事情？canvas.style.width和canvas.style.height在指定CSS长度单位“px”时起作用。谢谢你！abhay vyas：我尝试使用jquery作为您的方式，发现它有效。非常感谢。如果您使用fabric.js，我发现您可以通过：canvas.setDimensions（{width:800，height:200}，{backstoreOnly:true}）来实现这一点；setDimensions（{宽度：'800px'，高度：'200px'}，{cssOnly:true}）；将

宽度

和

高度

设置为css`只会拉伸画布图像。画布应该仍然是200x200px的区域，延伸到500x500 px谢谢你的回答！博詹德拉尼泊尔。@Calvin不客气！

canvas = document.getElementById('test_fabric');
ctx = canvas.getContext('2d');
canvas.style.width = '1000px'; // explicitly setting its unit 'px'
canvas.style.height = '260px';