1

So in this question I was under the impression that using a canvas as a background was faster,or the same speed as using a canvas tag. I currently have a rather bulky script running for a simulator. For some javaScripting reasons I cannot make the menu using JavaScript without detracting from the simulation so I had planned to use HTML to make a menu swipe from the side of the screen. As I was working on that I stumbled on the above link; however when I run the program using the background method it runs much slower. Is there any reason for this, and is there any solution?

Here are the relevant portions of code:

HTML

<html>
    <head>
        <title>Curtain Sim 2013 </title>
        <link href="global.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="main.js"></script>
        <script type="text/javascript" src="fabric.js"></script>
        <script type="text/javascript" src="background.js"></script>
        <script type="text/javascript" src="savDat.js"></script>
    </head>
    <div id = "canvas" style="width:100%; height:100%; background: -webkit-canvas(curSim2013); "></div>
    <!--<body>
        <canvas id="curSim2013">
            Your Browser does not support HTML5     </canvas>
    </body>-->
</html>

Javascript from main.js which runs it (there are some artifacts commented out from my experimenting)

function init()
{
    //Grab the Canvas tag from index.html
    canvas = document.getElementById('canvas');
    //Create an interface for interacting with canvas in 2D
    //context = canvas.getContext('2d');
    //var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

    //Set the dimensions of the canvas to match the broser window
    //Note that global.css helps make this possible
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    context = document.getCSSCanvasContext("2d", "curSim2013", canvas.width, canvas.height);
    //Erase the contents of the canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

            . . .

CSS (nothing much)

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}
4

1 回答 1

0

所以我最终做的是（我根本不知道 HTML）将 css 更改为如下所示：

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

canvas {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

div {
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    color:rgb(255,0,255);
}

并使用了画布方法。这完美地工作并且速度不受影响。

新的 HTML

<html>
    <head>
        <title>Curtain Sim 2013 </title>
        <link href="global.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="main.js"></script>
        <script type="text/javascript" src="fabric.js"></script>
        <script type="text/javascript" src="background.js"></script>
        <script type="text/javascript" src="savDat.js"></script>
    </head>
    <!--<div id = "canvas" style="width:100%; height:100%; background: -webkit-canvas(curSim2013); position: absolute;"></div>-->
    <body>
        <div>
        <p>
        hi
        </p>
        </div>
        <canvas id="canvas">
            Your Browser does not support HTML5     </canvas>
    </body>
</html>

新的 Javascript

function init()
{
    //Grab the Canvas tag from index.html
    canvas = document.getElementById('canvas');
    //Create an interface for interacting with canvas in 2D
    context = canvas.getContext('2d');
    //var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

    //Set the dimensions of the canvas to match the broser window
    //Note that global.css helps make this possible
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
            . . .
于 2013-05-08T14:13:19.273 回答