Магия исчезающего canvas'a
Выручайте друзья! Ума не приложу в чём беда.
Есть canvas на странице, при разворачивании браузера, canvas - исчезает. Проблема наблюдается только в опере (вплоть до последних версий). Никаких "периодических методов" не вызывается (т.е. setTimeout, setInterval - отсутствуют). Даже в голову не приходит, что может провоцировать такое поведение. Особенности: 1) Если браузер открыт в окне (не во весь экран), то после разворачивания - всё нормально. 2) Когда canvas пропадает, достаточно перейти на другую вкладку в браузере и вернутся, как он появится снова. Пример сие-чуда можно посмотреть здесь: http://colorights.com/materials.php?cat=6&id=6 Выкладываю код самого canvas'a, но честно, не думаю, что проблема в нём: var range = 30; //Толщина кисти по умолчанию var xpositionmouse = ''; var imageColor = '0'; //Цвет текстуры function canvasHelper(cat, pic, number){ $(".canvas_helper").css("backgroundImage", "url('cats/" + cat + "/" + pic + "/" + number + ".png')"); $(".canvas_helper").css("display", "inherit"); } function closeCanvasHelper(){ $(".canvas_helper").css("display", "none"); } function targetColor(color){ for(var i = 0; i < 7; i++){ $("#textureimage" + i).css("border", "3px solid #FFF"); } $("#textureimage" + color).css("border", "3px solid #000"); } function changeColor(color){ var texture = document.getElementById(color); var pattern = ctx.createPattern(texture, 'repeat'); ctx.fillStyle = pattern; } function SeeImg(color){ img = document.getElementById(color); ctx.drawImage(img,0,0); } //Инициализация канвас var canvas,ctx,w,h; var img,img2,startDraw,texture,pattern,x1,x2,color; function init(){ canvas = document.getElementById("canvas"); canvas.width = widthcolor; canvas.height = heightcolor; w = canvas.width; h = canvas.height; ctx = canvas.getContext('2d'); ctx.strokeRect(0,0,w,h); //Отрисовка фонового изображения /*img = document.getElementById("img0"); ctx.drawImage(img,0,0);*/ SeeImg("img0"); changeColor('img0'); //Функция отрисовки drawing = function(tool){ x1=0; x2=(Math.PI/180)*360; if(startDraw){ ctx.lineWidth = range; ctx.lineCap = 'round'; switch(tool){ case 'pen': ctx.beginPath(); ctx.arc(x, y, range, x1, x2); ctx.fill(); window.xpositionmouse = window.xpositionmouse + x + ',' + y + ',' + range + ':'+imageColor+'\n'; break; } } } startDraw = true; //События мыши canvas.addEventListener('mouseover', function(e){ canvas.addEventListener('mousemove', function(e){ e = e || event; var coords = this.getBoundingClientRect(); x = Number(e.clientX - coords.left); y = Number(e.clientY - coords.top); //x = e.pageX - canvas.offsetLeft; //Координата X //y = e.pageY - canvas.offsetTop; //Координата Y drawing('pen'); }, false); }, false); function print_img() { var dataURL = canvas.toDataURL(); } } Также, прикрепляю скриншоты проблемы(до и после), заранее, благодарю всех! ![]() ![]() Ребят, я не прошу вас ковыряться в коде всего сайта, просто, если кому-то известно, из-за чего может такое случиться, прошу написать. Не думаю, что есть сильно много вещей, которые могут так "напакастить". Какая-то специфическая особенность оперы это вызывает или какая-то моя ошибка, которую исправляют все браузеры кроме оперы.. |
Цитата:
|
Часовой пояс GMT +3, время: 20:54. |