我們在調整畫布大小時，希望畫布中的圖形保持不變，只是改變畫布本身的大小。但是如果使用Css設定畫布大小，則會出現問題。
如果使用Css設定Canvas畫布的大小，則導致畫布按比例縮放到你設定的值。
在Canvas元素的內部存在一個名為2d渲染環境（2d redering context）的對象，所以，通過Css設定畫布尺寸會引起奇怪的效果。
通過Html設定畫布大小。可以直接在Html頁面上設定Canvas元素的大小：
<canvas id="testCanvas" width="200" height="100"></canvas>
也可以通過js設定畫布大小：
var canvas = document.getElementById("testCanvas"); canvas.width = 200; canvas.height = 100;
這兩種方法都可以。
樣本
首先我們建立一個寬度為200px，高度為100px的畫布，它的邊框為紅色。然後在中間畫一個大小為20*20的正方形：
<!DOCTYPE html><html><head> <title></title></head><body><canvas id="testCanvas"></canvas><script> var canvas, context; canvas = document.getElementById("testCanvas"); canvas.width = 200; canvas.height = 100; canvas.style.border = "1px solid red"; context = canvas.getContext("2d"); context.strokeStyle = "#99cc33"; context.fillRect(90, 40, 20, 20);</script></body></html>
canvas.style.width = "100px"; canvas.style.height = "50px";
我們發現畫布是整體按比例縮小了1倍。
使用js設定畫布大小canvas.width = 100; canvas.height = 50; //設定畫布大小後，所有樣式會重設。因此需要重新繪製正方形 context.fillRect(90, 40, 20, 20);
相當於把畫布的右半部和下半部去掉了，達到了我們預期的效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
