jQuery使HTML5 Canvas响应 [英] jQuery to make HTML5 Canvas Responsive
本文介绍了jQuery使HTML5 Canvas响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使我的HTML5动画（Canvas）使用jQuery响应？
How can I make my HTML5 Animation (Canvas) responsive using jQuery ?
由于我的Canvas是1100px宽乘800px高度（为了更大的效果更大的屏幕）我的画布开始调整大小为1200像素宽度的屏幕。
Since my Canvas is 1100px Width by 800px Height (for a greater effect on bigger screens) I the canvas to start resizing for screens smaller than 1200 px width.
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);
}
PS：
有任何其他方法，即使没有使用jQuery，我打开任何可以解决我的问题。
PS: Also, if there is any other way of doing it even without using jQuery, I'm open to whatever can solve my problem.
感谢
我发现了一些东西并放在一起，但不起作用：
I found something and put it together but it doesn't work :
(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响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
