jQuery to make HTML5 Canvas Responsive

后端未结

关注

 1  352

故里飘歌

How can I make my HTML5 Animation (Canvas) responsive using jQuery ?

Since my Canvas is 1100px Width by 800px Height (for a greater effect on bigger screens) I the

相关标签:

1条回答

隐瞒了意图╮

2021-01-02 17:00

I think you can do it using 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>

0 讨论(0)