html5 Canvas 如何自适应屏幕大小

但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。 

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();