1

したがって、この質問では、キャンバスを背景として使用する方が速い、またはキャンバスタグを使用するのと同じ速度であるという印象を受けました。現在、シミュレーター用に実行されているかなりかさばるスクリプトがあります。いくつかの javaScripting の理由により、シミュレーションを損なうことなく JavaScript を使用してメニューを作成することはできないため、HTML を使用して画面の横からスワイプするメニューを作成することを計画していました。私がそれに取り組んでいたとき、私は上記のリンクに出くわしました。ただし、バックグラウンド メソッドを使用してプログラムを実行すると、実行速度が大幅に低下します。これには何か理由があり、解決策はありますか？

コードの関連部分は次のとおりです。

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>

それを実行するmain.jsからの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;

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

            . . .

CSS（大したことはない）

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 に答える