是否可以修复HTML5 canvas元素的宽度和高度?
通常的方式如下:
<canvas id="canvas" width="300" height="300"></canvas>
解决方法
canvas DOM元素具有对应于height =“…”和width =“…”属性的.height和.width属性。将其设置为JavaScript代码中的数值,以调整画布大小。例如:
var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = 800; canvas.height = 600;
注意这会清除画布,虽然你应该跟随ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);以处理那些没有完全清除画布的浏览器。在大小更改后,您需要重新绘制要显示的任何内容。
进一步注意,高度和宽度是用于绘制的逻辑画布尺寸,并且不同于style.height和style.width CSS属性。如果不设置CSS属性,则将使用画布的内部大小作为其显示大小;如果您设置CSS属性,并且它们与画布尺寸不同,则您的内容将在浏览器中缩放。例如:
// Make a canvas that has a blurry pixelated zoom-in // with each canvas pixel drawn showing as roughly 2x2 on screen canvas.width = 400; canvas.height = 300; canvas.style.width = '800px'; canvas.style.height = '600px';
看到放大4倍的画布的this live example。