调整HTML 5画布的大小以适应窗口

调整HTML 5画布的大小以适应窗口

如何自动缩放HTML 5?<canvas>元素以适应页面?

例如,我可以得到一个<div>若要通过设置heightwidth属性为100%,但<canvas>不会扩大,对吧?


米琪卡哇伊
浏览 608回答 3
3回答

不负相思意

我相信我找到了一个很好的解决办法:JavaScript/*&nbsp;important!&nbsp;for&nbsp;alignment,&nbsp;you&nbsp;should&nbsp;make&nbsp;things &nbsp;*&nbsp;relative&nbsp;to&nbsp;the&nbsp;canvas'&nbsp;current&nbsp;width/height. &nbsp;*/function&nbsp;draw()&nbsp;{ &nbsp;&nbsp;var&nbsp;ctx&nbsp;=&nbsp;(a&nbsp;canvas&nbsp;context); &nbsp;&nbsp;ctx.canvas.width&nbsp;&nbsp;=&nbsp;window.innerWidth; &nbsp;&nbsp;ctx.canvas.height&nbsp;=&nbsp;window.innerHeight; &nbsp;&nbsp;//...drawing&nbsp;code...}CSShtml,&nbsp;body&nbsp;{ &nbsp;&nbsp;width:&nbsp;&nbsp;100%; &nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;margin:&nbsp;0;}到目前为止,还没有给我带来任何负面影响。
打开App,查看更多内容
随时随地看视频慕课网APP