У меня проблема, связанная с Firefox, со сценарием, который я написал для создания 3d-макетов.
Правильное поведение заключается в том, что скрипт извлекает цвет фона из элемента, а затем использует этот цвет для рисования на холсте. Когда пользователь перемещается по ссылке и цвет фона меняется на правило: hover, изменяемый цвет меняется и на холсте. Когда пользователь отключается, цвет должен вернуться обратно к цвету, не зависавшему.
Это работает, как и ожидалось, в браузерах Webkit и Opera, но похоже, что Firefox не обновляет цвет фона в CSS сразу после события mouseout, поэтому текущий цвет фона не отображается при возникновении mouseout и за ним не следует другое событие, которое вызывает процедуру draw (). Он прекрасно работает в Opera, Chrome и Safari. Как я могу заставить Firefox сотрудничать?
Я включаю код, который, по моему мнению, наиболее актуален для моей проблемы. Любой совет, как мне решить эту проблему и получить последовательный эффект, был бы очень полезен.
function drawFace(coord, mid, popColor,gs,x1,x2,side) {
/*Gradients in our case run either up/down or left right.
We have two algorithms depending on whether or not it's a sideways facing
piece. Rather than parse the "rgb(r,g,b)" string(popColor) retrieved from
elsewhere, it is simply offset with the gs variable to give the illusion that it
starts at a darker color.*/
var canvas = document.getElementById('depth');
//This is for excanvas.js
var G_vmlCanvasManager;
if (G_vmlCanvasManager != undefined) { // ie IE
G_vmlCanvasManager.initElement(canvas);
}
//Init canvas
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
if (side) var lineargradient=ctx.createLinearGradient(coord[x1][0]+gs,mid[1],mid[0],mid[1]);
else var lineargradient=ctx.createLinearGradient(coord[0][0],coord[2][1]+gs,coord[0][0],mid[1]);
lineargradient.addColorStop(0,popColor);
lineargradient.addColorStop(1,'black');
ctx.fillStyle=lineargradient;
ctx.beginPath();
//Draw from one corner to the midpoint, then to the other corner,
//and apply a stroke and a fill.
ctx.moveTo(coord[x1][0],coord[x1][1]);
ctx.lineTo(mid[0],mid[1]);
ctx.lineTo(coord[x2][0],coord[x2][1]);
ctx.stroke();
ctx.fill();
}
}
function draw(e) {
var arr = new Array()
var i = 0;
var mid = new Array(2);
$(".pop").each(function() {
mid[0]=Math.round($(document).width()/2);
mid[1]=Math.round($(document).height()/2);
arr[arr.length++]=new getElemProperties(this,mid);
i++;
});
arr.sort(sortByDistance);
clearCanvas();
for (a=0;a<i;a++) {
/*In the following conditional statements, we're testing to
see which direction faces should be drawn,
based on a 1-point perspective drawn from the midpoint. In the first
statement, we're testing to see
if the lower-left hand corner coord[3] is higher on the screen than the
midpoint. If so, we set it's gradient
starting position to start at a point in space 60pixels higher(-60) than
the actual side, and we also declare which corners make up our face,
in this case the lower two corners, coord[3], and coord[2].*/
if (arr[a].bottomFace) drawFace(arr[a].coord,mid,arr[a].popColor,-60,3,2);
if (arr[a].topFace) drawFace(arr[a].coord,mid,arr[a].popColor,60,0,1);
if (arr[a].leftFace) drawFace(arr[a].coord,mid,arr[a].popColor,60,0,3,true);
if (arr[a].rightFace) drawFace(arr[a].coord,mid,arr[a].popColor,-60,1,2,true);
}
}
$("a.pop").bind("mouseenter mouseleave focusin focusout",draw);
Если вам нужно увидеть эффект в действии, или если вы хотите получить полный код JavaScript, вы можете проверить его здесь:
http://www.robnixondesigns.com/strangematter/