如何自动缩放 HTML5<canvas>元素以适应页面?
<canvas>
例如,我可以<div>通过将heightandwidth属性设置为 100% 来缩放 a,但是 a<canvas>不会缩放,对吗?
<div>
height
width
我相信我已经找到了一个优雅的解决方案:
JavaScript
/* important! for alignment, you should make things * relative to the canvas' current width/height. */ function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... }
CSS
html, body { width: 100%; height: 100%; margin: 0; }
到目前为止,对我没有任何重大的负面性能影响。