使用jQuery使HTML5画布具有响应式设计

Question

使用jQuery使HTML5画布具有响应式设计

7

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

由于我的Canvas宽度为1100px，高度为800px（在更大的屏幕上产生更好的效果），我希望Canvas在小于1200px宽度的屏幕上开始自适应大小。

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;
}

- user3546727

比1200像素宽更大还是更小？或者你的意思是1100像素？ - Filip Szczepanski

@filip 不，我的画布宽度是1100像素，并且居中于页面，因此我希望在屏幕宽度小于或等于1200像素时开始调整大小，但如果更简便的话，也可以在达到1100像素时开始调整大小。 - user3546727

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Filip Szczepanski · Accepted Answer

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

：该标签用于在HTML文档中创建一个段落。