我如何优化画布html5的此javascript代码，使其在Firefox中顺利运行？
[英]how can i optimize this javascript code for canvas html5 to make it run smooth in firefox?
问题描述
I have this big problem that when i run this javascript code used in canvas html5 in firefox it lags badly and the images blink, but in google chrome and internet explorer the performance is better. 
我有一个很大的问题，当我在Firefox中的画布html5中运行此javascript代码时，它严重滞后并且图像闪烁，但是在谷歌浏览器和Internet Explorer中，性能会更好。 I really need the procedure, so I wont get lost. 我真的需要该程序，所以我不会迷路。 The code is about projectile motion. 该代码是关于弹丸运动的。 I need to mention that i need the conditions im using. 我需要提及的是我需要即时通讯所使用的条件。 (Note: there is a fence function in javascript that i made that makes firefox lag so much to the point that is freezes) （注意：我制作的javascript中有一个fence函数，使Firefox滞后到冻结的程度）
This is my html: 这是我的html：
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<link href="img/logo-ute.ico" type="image/x-icon" rel="shortcut icon" />
<title>Simulacion</title>
<meta charset="windows-1252">
<link href="css/estilo.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/mp2.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="contenedor">
<div class="encabezado">
<div class="contenedor2">
<div id="imagenes">
<img id="img" src="img/logo_facu.png" width="500" height="200"/>
<img id="img2" src="img/logo-ute.jpg" width="200" height="200"/>
</div>
</div>
<div class="contenedor3">
<h2>SIMULACIÓN</h2>
<section id="cajalienzo">
<canvas id="lienzo" width=1000 height=500>
El navegador no soporta canvas
</canvas>
</section>
<div id="seccion">
<div id="simular">
<form id="inicio_sim">
<div>
<label>Angulo de Elevación: </label><input id="angulo" type="number" name="angulo" min="1" max="90" value="45" style="width:50px" maxlength="10" onkeypress="return justNumbers(event);"><span> º</span>
<label> Velocidad Inicial: </label><input id="velocidadin" type="number" name="velocidad" min="20" max="100" value="50" step="0.5" style="width:50px" maxlength="10" onkeypress="return justNumbers2(event);"><span> m/s</span></br>
</div>
<div id="botones_sim">
<button id="pausar" name="btnpausar" type="button" value="pausar" onclick="fun_pausar()"><span class="iconic icon-pause2"></span> PAUSAR </button>
<button id="iniciar" name="btniniciar" type="button" value="iniciar" onclick="fun_simular()"><span class="iconic icon-play3"></span> INICIAR </button>
<button id="reiniciar" name="btnReiniciar" type="button" value="reiniciar" onclick="fun_reiniciar()"><span class="iconic icon-spinner11"></span> REINICIAR </button>
</div>
</form>
</div>
</div>
<div id="mostrar">
<form id="resultado">
<div>
<label>Posicion-x: </label><input id="posx" type="text" readonly name="distancia-horizontal" value="0.00"><span> m</span>
<label> Velocidad-x: </label><input id="vx" type="text" readonly name="velocidad en x" value="0.00" autocomplete="off"><span> m/s</span>
</div>
<div>
<label>Posicion-y: </label><input id="posy" type="text" readonly name="distancia-vertical" value="0.00"><span> m</span>
<label> Velocidad-y: </label><input id="vy" type="text" readonly name="velocidad en y" value="0.00"><span> m/s</span>
<label>Tiempo: </label><input id="tiempo" type="text" readonly name="tiempo" value="0.00"><span> s</span>
</div>
</form>
<h1></h1>
<div id="botones">
<ul>
<li><a id="regresar" href="Teoria.html"><span class="iconic icon-circle-left"></span> ANTERIOR PAGINA</a></li>
<li><a id="seguir" href="Bibliografia.html"><span class="iconic icon-circle-right"></span> SIGUIENTE PAGINA</a></li>
</ul>
<h1></h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my javascript: 这是我的javascript：
var canvas;
var context;
var tiempo = 0;
var tiempo2 = 999999;
var temp;
var temp2;
var x2;
var y2;
var angulogrados;
var x;
var y;
//Detects the browswer to skip the fence function in firefox
function navegador(){
c=navigator.userAgent.search("Chrome");
f=navigator.userAgent.search("Firefox");
m8=navigator.userAgent.search("MSIE 8.0");
m9=navigator.userAgent.search("MSIE 9.0");
if (c>-1){
brwsr = "Chrome";
context.save();
sombras2();
cerca();
context.restore();
}
else if(f>-1){
if(temp2==true)
{
brwsr = "Firefox";
temp2=false;
}
}else if (m9>-1){
brwsr ="MSIE 9.0";
context.save();
sombras2();
cerca();
context.restore();
}else if (m8>-1){
brwsr ="MSIE 8.0";
context.save();
sombras2();
cerca();
context.restore();
}
else
{
context.save();
sombras2();
cerca();
context.restore();
}
}
//loads this functions first
window.onload=fun_iniciar;
function fun_iniciar(){
//objeto canvas
canvas = document.getElementById("lienzo");
//crea un conexto del objeto canvas
context = canvas.getContext("2d");
temp2=true;
//llama a la funcion que dibuja el fondo del canvas
fondo();
// puntos de iniclizacion del proyectil
x=25;
y=canvas.height-20;
//calls the functions to draw the vectors and calculate the proyectile speed and position
dibupun(0,0);
//inicializa los valores
angulogrados=0;
velocidad=0;
//tiempo real
intervalo=50;
tiempo=intervalo/1000;
y1=0;
vx=0;
vxy=0;
vy=0;
x2=20;
y2=80;
document.getElementById("reiniciar").disabled = true;
}
//se activa cuando el boton inicar se aplasta
function fun_simular(){
document.getElementById("reiniciar").disabled = false;
// se hace una repetecion de la funcion fun_play
interval=setInterval(fun_play,intervalo);
}
// aqui se va a dar todos los calculos para dibujar el proyectil
function fun_play(){
//llama a la funcion que dibuja el fondo del canvas
fondo();
//desavilita los comando de insertar un ganulo y la velocidad a que no cambie la trayectoria durante la simulacion
document.getElementById("angulo").setAttribute("disabled","true");
document.getElementById("velocidadin").setAttribute("disabled","true");
//extrae el angulo y la velocidad
angulogrados=document.getElementById("angulo").value;
anguloradianes=angulogrados*Math.PI/180;
velocidadi=document.getElementById("velocidadin").value;
//calcula las velocidades iniciales en x,y
velocidadiy=velocidadi*Math.sin(anguloradianes);
velocidadix=velocidadi*Math.cos(anguloradianes);
//calcula las pox- y la pos-y
x=(velocidadi*Math.cos(anguloradianes)*tiempo)+25;
y1=((velocidadiy*tiempo)+((0.5)*(-9.81)*(Math.pow(tiempo,2))));
//calcula la pos-y para ubicarla en el canvas
y=(-y1-25)+canvas.height;
//calcula la velocidad final en y la velocidad final en x es la velocidad inicial en x
velocidadfy=velocidadiy+((-9.81)*tiempo);
// devuelve los resultados de la posicion y la velocidad
document.getElementById("posx").value=((x-25.00).toFixed(2));
if(y1<0)
{
document.getElementById("posy").value=((0).toFixed(2));
}
else
{
document.getElementById("posy").value=((y1).toFixed(2));
}
document.getElementById("vx").value=velocidadix.toFixed(2);
document.getElementById("vy").value=velocidadfy.toFixed(2);
document.getElementById("tiempo").value =(tiempo).toFixed(2);
// la animacion se detiene cuando la altura es negativa o 0
if(y1<=0)
{
document.getElementById("angulo").removeAttribute("disabled");
document.getElementById("velocidadin").removeAttribute("disabled");
window.clearInterval(interval);
tiempo2=tiempo;
temp=true;
}
document.getElementById("iniciar").disabled = true;
//adds the time
tiempo=tiempo+0.05;
//manda a dibujar con los valores calculados
dibupun(velocidadix,velocidadfy);
}
//draws the background
function fondo()
{
var imageObj2 = new Image();
imageObj2.onload = function() {
context.moveTo(0, 0);
context.drawImage(imageObj2, 0, 0, canvas.width, canvas.height);
};
imageObj2.src = 'https://i.ytimg.com/vi/aErlwl1hEHw/sddefault.jpg';
var cloud = new Image();
cloud.onload = function(){
context.moveTo(0, 0);
context.drawImage(cloud, 0, 0, canvas.width/2.1, canvas.height/2);
};
cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
}
function sombras()
{
context.shadowOffsetY = 25;
context.shadowOffsetX = 20;
context.shadowBlur = 0.5;
context.shadowBlur = 0.5;
context.shadowColor = 'rgba(50, 50, 50, 0.6)';
}
function sombras2()
{
context.shadowOffsetY = 25;
context.shadowOffsetX = 20;
context.shadowBlur = 0.5;
context.shadowBlur = 0.5;
context.shadowColor = 'rgba(50, 50, 50, 0.1)';
}
function sombras3()
{
context.shadowOffsetY = 25;
context.shadowOffsetX = 20;
context.shadowBlur = 0.5;
context.shadowBlur = 0.5;
context.shadowColor = 'rgba(50, 50, 50, 0)';
}
function dibujar_calc()
{
context.beginPath();
context.font = "15pt Calibri";
context.fillStyle = "white";
context.textAlign = "center";
context.textBaseline = "middle";
}
//pausa la animacion
function fun_pausar(){
window.clearInterval(interval);
document.getElementById("iniciar").disabled = false;
}
//draws the vectors
function dibupun(vx,vy){
context.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function() {
context.moveTo(x, y);
context.save();
trazaraltura(vy);
context.restore();
context.save();
sombras3();
velocidadx(vx, vy);
context.restore();
context.save();
sombras3();
velocidady(vy);
context.restore();
navegador();
context.save();
context.beginPath();
flechay(vy);
flechax(vx, vy);
flechaxy(vx, vy);
context.fillStyle = "white";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "blue";
context.stroke();
context.restore();
if((x>900 && tiempo>11) || (x>900))
{
context.drawImage(imageObj, canvas.width-100-14, y-14, 30, 30);
}
else
{
context.drawImage(imageObj, x-14, y-14, 30, 30);
}
};
imageObj.src = 'http://www.dpcdsb.org/NR/rdonlyres/132B2859-0F1F-42F6-BE18-A151ABF439BE/105710/basketball.png';
sombras();
}
//draws the arrow in x
function flechax(vx, vy){
context.lineWidth = 5;
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
context.moveTo(canvas.width-100, y);
context.lineTo(canvas.width-100+vx, y);
context.lineTo(canvas.width-100+vx-10, -5+y);
context.lineTo(canvas.width-100+vx-10, 5+y);
context.lineTo(canvas.width-100+vx, y);
context.fill();
}
else
{
context.moveTo(x, y);
context.lineTo(x+vx, y);
context.lineTo(x+vx-10, -5+y);
context.lineTo(x+vx-10, 5+y);
context.lineTo(x+vx, y);
context.fill();
}
}
//draws arrow in y
function flechay(vy){
context.lineWidth = 5;
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
context.moveTo(canvas.width-100, y);
}
else
{
context.moveTo(x, y);
}
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
if(vy>0)
{
context.lineTo(canvas.width-100, y-vy);
context.lineTo(-5+canvas.width-100, y-vy+10);
context.lineTo(5+canvas.width-100, y-vy+10);
context.lineTo(canvas.width-100, y-vy);
}
else if(vy<0)
{
context.lineTo(canvas.height+400, y-vy);
context.lineTo(-5+canvas.height+400, y-vy-10);
context.lineTo(5+canvas.height+400, y-vy-10);
context.lineTo(canvas.height+400, y-vy);
}
}
else
{
if(vy>0)
{
context.lineTo(x, canvas.height-vy-y1-25);
context.lineTo(-5+x, canvas.height-vy-y1-15);
context.lineTo(5+x, canvas.height-vy-y1-15);
context.lineTo(x, canvas.height-vy-y1-25);
}
else if(vy<0)
{
context.lineTo(x, y-vy);
context.lineTo(-5+x, y-vy-10);
context.lineTo(5+x, y-vy-10);
context.lineTo(x, y-vy);
}
}
context.fill();
}
//draws an arrow in xy(I cant make it work correctly)
function flechaxy(vx, vy){
context.lineWidth = 5;
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
context.moveTo(canvas.width-100, y);
context.lineTo(canvas.width-100+vx, y);
context.lineTo(canvas.width-100+vx-10, -5+y);
context.lineTo(canvas.width-100+vx-10, 5+y);
context.lineTo(canvas.width-100+vx, y);
context.fill();
}
else
{
if(vy>0)
{
if(y>0)
{
context.moveTo(x, y);
context.lineTo(x+x2, y-vx+5-y2+vy);
context.lineTo(x+x2-5, y-vx-5-y2+vy);
context.lineTo(x+x2+5, y-vx-5-y2+vy);
context.lineTo(x+x2, y-vx+5-y2+vy);
context.fill();
x2=x2+0.35;
y2=y2-1.5;
}
}
else if(vy<0)
{
if(y>0)
{
context.moveTo(x, y);
context.lineTo(x+x2, y+vx+y2-vy);
context.lineTo(x+x2+5, y+vx-10+y2-vy);
context.lineTo(x+x2-5, y+vx-10+y2-vy);
context.lineTo(x+x2, y+vx+y2-vy);
context.fill();
x2=x2-0.35;
y2=y2+1.5;
}
}
}
}
//draws the fences (in firefox this gets ignored because the code lags so much that it doesnt run)
function cerca(){
context.lineWidth = 5;
context.beginPath();
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
context.moveTo(canvas.width, y);
}
else
{
context.moveTo(x, y);
}
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
for(i=0;i<canvas.width-199;i+=200)
{
context.fillStyle = "#A4A4A4";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#A4A4A4";
context.rect(-x+i+canvas.width+90, 420, 10, 80);
if(i>canvas.width-200)
{
context.globalAlpha=0;
context.rect(-x+i+canvas.width+90, 420, 10, 80);
}
}
context.beginPath();
for(i=0;i<canvas.width-399;i+=200)
{
context.fillStyle = "#0B614B";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#0B614B";
context.rect(-x+i+canvas.width+100, 430, 190, 5);
context.rect(-x+i+canvas.width+100, 450, 190, 5);
context.rect(-x+i+canvas.width+100, 470, 190, 5);
if(i>=canvas.width-400)
{
context.globalAlpha=0;
context.fillRect(-x+i+canvas.width+100, 430, 190, 5);
context.fillRect(-x+i+canvas.width+10, 450, 190, 5);
context.fillRect(-x+i+canvas.width+10, 470, 190, 5);
}
}
}
else
{
for(i=0;i<canvas.width-199;i+=200)
{
context.fillStyle = "#A4A4A4";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#A4A4A4";
context.rect(i+210, 420, 10, 80);
if(i>canvas.width-200)
{
context.globalAlpha=0;
context.rect(i+210, 420, 10, 80);
}
}
context.beginPath();
for(i=0;i<canvas.width-399;i+=200)
{
context.fillStyle = "#0B614B";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#0B614B";
context.rect(i+220, 430, 190, 5);
context.rect(i+220, 450, 190, 5);
context.rect(i+220, 470, 190, 5);
if(i>=canvas.width-400)
{
context.globalAlpha=0;
context.fillRect(i+220, 430, 190, 5);
context.fillRect(i+220, 450, 190, 5);
context.fillRect(i+220, 470, 190, 5);
}
}
}
context.stroke();
}
//shows the x velocity along with y position and x position in the canvas
function velocidadx(vx, vy){
if(tiempo > 0.1)
{
dibujar_calc();
ancho2=x-25.00;
altura2=canvas.height-y-20.00;
if((x>canvas.width-200 && tiempo>11) || (x>canvas.width-200))
{
if(tiempo > tiempo2-0.001)
{
trazaraltura(vy);
context.fillText("Posicion-y: "+(0).toFixed(2)+" m", canvas.width-210+100, y-100);
}
else
{
trazaraltura(vy);
context.fillText("Posicion-y: "+altura2.toFixed(2)+" m", canvas.width-210+100, y-100);
}
context.fillText("Posicion-x: "+ancho2.toFixed(2)+" m", canvas.width-210+100, y-130);
context.fillText("Vx: "+vx.toFixed(2)+" m/s", canvas.width-210+100, y-40)
}
else
{
if(temp==true)
{
trazaraltura(vy);
context.fillText("Posicion-y: "+(0).toFixed(2)+" m", x+100, y-100);
}
else
{
context.fillText("Posicion-y: "+altura2.toFixed(2)+" m", x+100, y-100);
}
context.fillText("Posicion-x: "+ancho2.toFixed(2)+" m", x+100, y-130);
context.fillText("Vx: "+vx.toFixed(2)+" m/s", x+100, y-40)
}
}
}
//shows the y velocity in the canvas
function velocidady(vy){
if(tiempo > 0.1)
{
dibujar_calc();
if((x>canvas.width-200 && tiempo>11) || (x>canvas.width-200))
{
context.fillText("Vy: "+vy.toFixed(2)+" m/s", canvas.width-210+100, y-70);
}
else
{
context.fillText("Vy: "+vy.toFixed(2)+" m/s", x+100, y-70);
}
}
}
//draws the red lines that follow the projectile
function trazaraltura(vy){
context.beginPath();
context.lineWidth = 1;
context.strokeStyle = "red";
context.moveTo(x, y);
altura=parseInt(y);
alcance=parseInt(x);
if(tiempo > 0.1)
{
if((x>canvas.width-100 && tiempo>11) || (x>canvas.width-100))
{
for (i=altura;i<canvas.height;i+=5)
{
if((i%2)!==0)
{
context.lineTo(canvas.width-100,i);
}
else
{
context.moveTo(canvas.width-100,i+10);
}
}
for (i=0;i<alcance;i+=5)
{
if((i%2)!==0)
{
context.lineTo(i,y);
}
else
{
context.moveTo(i+10,y);
}
}
}
else
{
for (i=altura;i<canvas.height;i+=5)
{
if((i%2)!==0)
{
context.lineTo(x,i);
}
else
{
context.moveTo(x,i+10);
}
}
for (i=0;i<alcance;i+=5){
if((i%2)!==0)
{
context.lineTo(i,y);
}
else
{
context.moveTo(i+10,y);
}
}
}
}
context.stroke();
}
//hace que solo se pueda meter numeros en el campo de angulo y velocidad
function justNumbers(e)
{
var keynum = window.event ? window.event.keyCode : e.which;
if ((keynum == 8) || (keynum == 46))
return true;
return /\d/.test(String.fromCharCode(keynum));
}
// reinicia la animacion cuando aplasta el boton reinciar
function fun_reiniciar(){
document.getElementById("angulo").removeAttribute("disabled");
document.getElementById("velocidadin").removeAttribute("disabled");
document.getElementById("posx").value ="";
document.getElementById("posy").value ="";
document.getElementById("vx").value ="";
document.getElementById("vy").value ="";
document.getElementById("tiempo").value ="";
context.clearRect(0, 0, canvas.width, canvas.height);
window.clearInterval(interval);
temp=false;
document.getElementById("iniciar").disabled = false;
fun_iniciar();
}
1 个解决方案
解决方案1
0 2015-12-31 04:26:51
Using the drawing functions like rect, arc, moveTo, lineTo etc will always be slow. 使用诸如rect，arc，moveTo，lineTo等绘图功能总是很慢。 What you need to do is draw all the bits that do not change shape and colour onto images then draw the images rather than use the draw functions. 您需要做的是将所有不会改变形状和颜色的位绘制到图像上，然后绘制图像，而不要使用绘制功能。
Creating a drawable image. 创建可绘制的图像。
It is easy to create an image that you can draw to. 创建可以绘制的图像很容易。 Just create a canvas and attach the context to it. 只需创建画布并将上下文附加到画布即可。 Images created like this are just as quick as Images and can be drawn very quickly onto the main canvas 这样创建的图像与图像一样快，并且可以非常快速地绘制到主画布上
var createImage = function(width, height){ // create a drawable image
var image = document.createElement("canvas");
image.width = width;
image.height = height;
image.ctx = image.getContext("2d"); // create the context and attach it to the image
return image;
}
Rendering to the image 渲染到图像
To render to the image you do it as you do to any canvas 要渲染图像，就像处理任何画布一样
var fencePost = createImage(100,400);
fencePost.ctx.fillStyle ="White";
fencePost.ctx.strokeStyle ="Black";
fencePost.ctx.beginPath();
// the drawing stuff
fencePost.ctx.fill();
fencePost.ctx.stroke();
To draw the image onto the main canvas just do it like any other image. 要将图像绘制到主画布上，只需像其他图像一样进行即可。
var fenceWidth = 400;
// ctx is the main canvas.
for(var i = 0; i < ctx.canvas.width; i += fenceWidth){
ctx.drawImage(fencePost, i , 400);
}
You also have the advantage of being able to change just the one image and as it is drawn many times you get them all to change with the one draw function. 您还具有仅更改一张图像的优点，并且由于多次绘制，您可以使用一张绘制功能更改所有图像。
The function fillRect() is about the same speed as the function drawImage() (if you keep the image size to fit into GPU RAM). 函数fillRect()与函数drawImage()大约具有相同的速度（如果保持图像大小适合GPU RAM）。 You can get a significant speed improvement by offloading the detailed drawing to the start, and just rendering the images when you need them. 通过将详细图形卸载到一开始，并在需要时仅渲染图像，可以显着提高速度。
requestAnimationFrame requestAnimationFrame
To update the animation use requestAnimationFrame(functionName) as it will do a much better job of keeping the frame rate constant and avoids flickering if it can, by keeping in sync with the display refersh. 要更新动画，请使用requestAnimationFrame(functionName)因为它可以通过与显示参考保持同步来更好地保持帧速率恒定，并避免闪烁（如果可以的话）。
function mainLoop(){
// your code for the main loop
requestAnimationFrame(mainLoop); // request the next animation frame
// and call mainLoop when available.
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML5 Canvas Javascript 如何制作平滑画笔 - HTML5 Canvas Javascript how to make smooth brush
如何优化更新HTML5画布上的许多内容？ - How can I optimize updating lots of things on an HTML5 canvas?
如何让HTML5画布显示HTML？ - How can I make an HTML5 canvas display HTML?
如何制作Html5 / Javascript画布填充窗口屏幕？ - how can I make Html5/Javascript canvas fill window screen?
如何在运行时在HTML5 Canvas中绘制一个Square？ - How can i draw a Square in HTML5 Canvas at run time?
如何让HTML5画布全屏显示？ - How can I make the HTML5 canvas go fullscreen?
YUI，Javascript：如何优化此代码段以使其运行更快？ - YUI,Javascript: How can i optimize this code snippet to run faster?
如何使用 javascript HTML5 canvas 通过 N 个点绘制平滑曲线？ - how to draw smooth curve through N points using javascript HTML5 canvas?
如何在Firefox中启用HTML5画布文本？ - How to enable HTML5 canvas text in Firefox?
如何使图像适合边缘？ html5 canvas javascript - How to make image fit in the edge? html5 canvas javascript
相关标签