所以在这个question我的印象是使用 Canvas 作为背景更快，或者与使用 Canvas 标签的速度相同。我目前有一个为模拟器运行的相当庞大的脚本。由于某些 javaScript 原因，我无法在不影响模拟的情况下使用 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;
}
最佳答案
所以我最终所做的(我根本不懂 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);
}
并使用 Canvas 方法。这非常有效，速度不受影响。
新的 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;
. . .
关于javascript - 将 Canvas 作为背景未按预期执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16441403/