如何使canvas自适应浏览器窗口？

<!DOCTYPEhtml><html><head><metacharset="utf-8"><linkhref="canvas.css"rel="stylesheet"... <!DOCTYPE html>

<html>
<head>

<meta charset="utf-8">

<link href="canvas.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.get(0).getContext("2d");

$(window).resize(resizeCanvas);

function resizeCanvas() {
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
};

resizeCanvas();
});
</script>
</head>

<body>
<canvas id="myCanvas" width="500" height="500" style="background-image:url(bg.jpg)">

</canvas>
</body>
</html>
按照网上的代码，为什么没有反应？展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

hanlidongyang
2016-05-05 · TA获得超过885个赞

知道小有建树答主

回答量：1109

采纳率：50%

帮助的人：486万

我也去答题访问个人页

关注

展开全部

if (window.addEventListener) {   
	window.addEventListener('DOMContentLoaded', onCustomLoaded, false);   //firefox
	window.addEventListener('load', onCustomLoaded, false);
	window.addEventListener('resize', onCustomResize, false);
} else if (window.attachEvent)  {
	window.attachEvent('onload', onCustomLoaded);  //IE
	window.attachEvent('resize', onCustomResize);  //IE
}

var c_canvas;//canvas对象
/**
 * 加载完成
 * @param  {[type]} e [description]
 * @return {[type]}   [description]
 */
function onCustomLoaded(e){ 
	console.log("loaded");
	document.body.style.backgroundColor="#9CB2F9";//背景色
	c_canvas=document.getElementById("canvas");//canvas的id
	onCustomResize(null);
}

/**
 * 窗口尺寸变化时，等比缩放，居中canvas
 * @param  {[type]} e [description]
 * @return {[type]}   [description]
 */
function onCustomResize(e){ 
	//console.log("resize");
	if(!c_canvas)return;
	var w=parseInt(c_canvas.width);
	var h=parseInt(c_canvas.height);
	var size=getViewPortSize();
	var scale=Math.min(size.w/w,size.h/h);
	c_canvas.style.width=w*scale+"px";
	c_canvas.style.height=h*scale+"px";
	c_canvas.style.position ="absolute";
	c_canvas.style.left=(size.w-w*scale)/2+"px";
	c_canvas.style.top=(size.h-h*scale)/2+"px";
}

/**
 * 获取浏览器窗口的可视区域的宽度
 * @return {[type]} [description]
 */
function getViewPortSize() {
	var o={"w":NaN,"h":NaN};
	o.w=document.documentElement.clientWidth || document.body.clientWidth;
	o.h=document.documentElement.clientHeight || document.body.clientHeight;
    return o;
}


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使canvas自适应浏览器窗口？

其他类似问题

为你推荐：