如何使用 jQuery 使我的 HTML5 动画 (Canvas) 具有响应性？
由于我的 Canvas 宽度为 1100 像素，高度为 800 像素(为了在更大的屏幕上产生更大的效果)，我开始调整 Canvas 大小以适应宽度小于 1200 像素的屏幕。
HTML:
<canvas id="canvas" width="1100" height="800" style="background-color:#ffffff"></canvas>
脚本:
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/preloader/_282.png", id:"_282"},
{src:"images/preloader/Bitmap10.png", id:"Bitmap10"},
{src:"images/preloader/Bitmap11.png", id:"Bitmap11"},
{src:"images/preloader/Bitmap12.png", id:"Bitmap12"},
{src:"images/preloader/Bitmap13.png", id:"Bitmap13"},
{src:"images/preloader/Bitmap14.png", id:"Bitmap14"},
{src:"images/preloader/Bitmap15.png", id:"Bitmap15"},
{src:"images/preloader/Bitmap16.png", id:"Bitmap16"},
{src:"images/preloader/Bitmap17.png", id:"Bitmap17"},
{src:"images/preloader/Bitmap18.png", id:"Bitmap18"},
{src:"images/preloader/Bitmap2.png", id:"Bitmap2"},
{src:"images/preloader/Bitmap3.png", id:"Bitmap3"},
{src:"images/preloader/Bitmap4.png", id:"Bitmap4"},
{src:"images/preloader/Bitmap5.png", id:"Bitmap5"},
{src:"images/preloader/Bitmap6.png", id:"Bitmap6"},
{src:"images/preloader/Bitmap7.png", id:"Bitmap7"},
{src:"images/preloader/Bitmap8.png", id:"Bitmap8"},
{src:"images/preloader/Bitmap9.png", id:"Bitmap9"},
{src:"images/preloader/flash0aiAssets.png", id:"flash0aiAssets"}
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.preloadercs6();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
附言: 此外，如果即使不使用 jQuery 也有任何其他方法，我愿意接受任何可以解决我的问题的方法。
谢谢
更新
我找到了一些东西并将其放在一起，但它不起作用:
(function($){
$(window).resize(function(){
windowResize();
});
})(jQuery);
function windowResize(){
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
var test = (window.innerHeight/800)*1;
exportRoot.scaleX = exportRoot.scaleY = test;
}
最佳答案
我认为您可以使用 CSS 来完成。
例如
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>title</title>
<!--[if lt IE 9]> HTML5Shiv
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
.container {
margin: 0;
padding: 0;
height: 100%;
}
#canvas {
display: block;
padding: 0;
margin: 0 auto;
background-color:red;
}
@media(max-width:1200px) {
.container {
margin: 0 50px;
}
#canvas {
width: 100%;
height: auto;
background-color:red;
}
}
</style>
</head>
<body>
<div class="container">
<canvas width=1100 height=850 id="canvas"></canvas>
</div>
</body>
关于jQuery 使 HTML5 Canvas 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23445907/