jQuery pour rendre Responsive HTML5 Canvas

Comment puis-je faire mon Animation HTML5 (Canvas) en réponse à l'aide de jQuery ?

Depuis ma Toile est 1100px la Largeur de 800px de Hauteur (pour un effet plus grand sur de plus grands écrans) j'ai la toile pour commencer le redimensionnement des écrans plus petits que 1200 px de large.

HTML:

<canvas id="canvas" width="1100" height="800" style="background-color:#ffffff"></canvas>

Script :

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:
Aussi, si il n'y a aucune autre façon de le faire, même sans l'aide de jQuery, je suis ouverte à tout ce qui peut résoudre mon problème.

Grâce

Mise à JOUR

J'ai trouvé quelque chose et de le mettre ensemble, mais il ne fonctionne pas :

(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;
}
Plus grand ou plus petit que 1200 px de large? ou voulez-vous dire 1100px?
non, ma Toile est de 1100 px et centré sur la page, donc je le veux pour démarrer le redimensionnement lorsque l'écran est 1200px ou moins, mais si c'est moins gênant, il peut aussi commencer à le redimensionnement lors de l'atteinte d'1100px

OriginalL'auteur | 2014-05-03

  1. 11

    Je pense que vous pouvez le faire en utilisant le CSS.

    par exemple

    <!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>

    Cela fonctionne très bien ^^ Merci et désolé pour la réponse tardive, j'ai été très occupé ^^ bonne journée !!!
    Je suis heureux que cela fonctionne. Bonne journée 🙂
    Aussi, puis-je demander comment dois-je faire si je veux le même redimensionner si @media(max-height:850px) ?
    Je ne comprends pas ce que tu veux dire, mais voici un bon article sur le sujet: css-tricks.com/css-media-queries
    Eh bien, Depuis ma Toile est de 1200 largeur de 850 hauteur, je veux redimensionner quand @media(max-width:1200px) qu'elle ne l'est aujourd'hui, mais aussi quand @media(max-height:850px) ... mais quand j'ai ajouté que media querie il n'a pas redimensionner quand j'ai commencé à changer la hauteur de mon navigateur, les rendant plus petites de 850 px 🙂

    OriginalL'auteur Filip Szczepanski