jQuery使HTML5 Canvas响应

Question

问

jQuery使HTML5 Canvas响应

mobiledu2502892377 发布于 2023-01-17 10:18

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

因为我的画布是1100px宽度乘800px高度(对于更大的屏幕更大的效果)我画布开始调整宽度小于1200像素的屏幕.

HTML:

脚本:

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,如果还有其他方法可以做到这一点,我愿意接受任何可以解决我问题的方法.

谢谢

UPDATE

我发现了一些东西并把它放在一起但它不起作用:

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

Filip Szczep.. 11

我想你可以用CSS做到这一点.

例如



    
    title

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 canvas"></canvas>
    </div>
</body>

2023-01-17 10:20 回答

BeckyWang25_966

撰写答案