使用HTML5
幸運的是，有一個巧妙的解決方案可以輕鬆縮放：
不要靜態設定
<code class="javascript">function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}</code>此腳本確保畫布始終與視口的匹配
為了保持正確的定位，將繪圖操作與畫布更新的尺寸對齊至關重要。
用CSS 補充JavaScript 以確保畫布跨越整個視窗：
<code class="css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</code>此CSS 可確保畫布佔據整個螢幕，使其完美適合任何HTML 容器。
事實證明，實施此擴充機制對效能的影響最小。但是，需要注意的是，在大幅放大的畫布上繪製複雜圖形會減慢渲染過程。
以上是如何使 HTML5 Canvas 自動縮放以適合其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
