相关疑难解决方法(0)

是否可以修复HTML5 canvas元素的宽度和高度？

通常的方法如下:

<canvas id="canvas" width="300" height="300"></canvas>

可以更改画布的大小(宽度和高度),但不能动态更改画布的样式大小.

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;
}

要么

<div><canvas id="test_fabric" width="200" height="200" 
style="width:200px; height:200px"></canvas></div>

注意:当内联样式存在时,css文件将无效.

有什么方法可以通过JavaScript动态地更改画布的样式大小？

提前致谢!