將畫布作爲背景並不如預期的那樣

因此，在這個question中，我覺得使用畫布作爲背景的速度更快，或者與使用畫布標籤的速度相同。我目前有一個相當龐大的腳本運行模擬器。由於一些java腳本的原因，我無法使用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>

的Javascript從main.js它運行它（有從我的運行實驗註釋掉一些文物）

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

來源

2013-05-08 user1642826

所以我落得這樣做（我不知道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-08 14:13:19 user1642826

將畫布作爲背景並不如預期的那樣

回答

相關問題