如何自动缩放HTML5 <canvas>元素以适合页面?
<canvas>
例如,我可以<div>通过将height和width属性设置为100%来缩放,但是<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; }
到目前为止,对我没有太大的负面性能影响。