HTML5中的画布宽度和高度

前端之家收集整理的这篇文章主要介绍了HTML5中的画布宽度和高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以修复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

原文链接:https://www.f2er.com/html5/170339.html

猜你在找的HTML5相关文章