Question

如何使用jQuery使我的HTML5动画（Canvas）响应？

由于我的Canvas是1100px宽度乘800px高度（对于更大的屏幕效果更大）我画布开始调整宽度小于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);
    }

PS： 此外，即使不使用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;
}

Answer 1

我认为你可以用CSS做到这一点。

e.g。

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

的更新

1 个答案: