html5 Canvas 如何自適應螢幕大小
阿新 • • 發佈：2019-01-01
但是這樣創建出的畫布不能隨著瀏覽器視窗大小的改變而動態的改變畫布的大小。而這一點往往又非常重要， 因為我們會經常改變瀏覽器視窗大小，不會一直保持某個固定的大小。
html程式碼
<canvas width="300" height="300" id="myCanvas"></canvas>
設定樣式
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
canvas{
display: block;
width: 100%;
height: 100%;
}
但是這樣寫只能改變畫布自適應螢幕,並不能使畫布裡邊的內容正常顯示,反而會造成畫布裡面的內容失真;解決方案:在js裡面加入下面的程式碼
$(window).resize(resizeCanvas);
function resizeCanvas() {
$("#myCanvas").attr("width", $(window).get(0).innerWidth);
$("#myCanvas").attr("height", $(window).get(0).innerHeight);
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
//下面是要繪製的一個圓
ctx.beginPath();
ctx.arc(20, 20, 20, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
};
resizeCanvas();