jQuery 使 HTML5 Canvas 响应式答案

【问题标题】：jQuery to make HTML5 Canvas ResponsivejQuery 使 HTML5 Canvas 响应式
【发布时间】：2014-06-20 04:28:54
【问题描述】：

如何使用 jQuery 使我的 HTML5 动画 (Canvas) 具有响应性？

由于我的画布是 1100 像素宽度 x 800 像素高度（为了在更大的屏幕上产生更大的效果），我开始为小于 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;
}

【问题讨论】：

宽度大于还是小于 1200 像素？还是你的意思是 1100 像素？
@filip 不，我的画布是 1100 像素和居中页面，因此我希望它在屏幕为 1200 像素或更少时开始调整大小，但如果它不那么麻烦，它也可以在达到 1100 像素时开始调整大小

标签： jquery html canvas responsive-design

【解决方案1】：

我认为你可以使用 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>

【讨论】：

这很好用 ^^ 感谢和抱歉迟到的回复，我一直很忙^^祝你有美好的一天！！！
另外，如果我想在@media(max-height:850px) 的情况下发生相同的调整大小，我该怎么办？
我不明白你的意思，但这里有一篇关于它的好文章：css-tricks.com/css-media-queries
好吧，由于我的 Canvas 是 1200 宽 x 850 高，我希望它在 @media(max-width:1200px) 和 @media(max-height: 850px) ...但是当我添加媒体查询时，当我开始更改浏览器的高度时它没有调整大小，使其小于 850 px :)
我认为您必须将 height:100% 添加到 Canvas 的父级（div 或 body）。