Всем добрый день. Недавно изучи канвас, и теперь пробую сделать его адаптивным, просто чтобы потренироваться. Проблема при resize() запускается функция Start(), с новыми параметрами длины и высоты (т.к. не получалось менять их динамически. В этом канвасе несколько таймеров и событий, ну и после ресайза та функция запускается еще раз, но таймеры и события не перестают работать - картинки накладываются одна на другую, и при большом количестве ресайзов начинает виснуть, ну логично. Так как мне отключать все события внутри Start при ресайзе окна? Вот ВЕСЬ код:
<style type="text/css">
body{
margin: 0;
}
</style>
<script type="text/javascript">
var x1;
var y1;
var ww = window.innerWidth;
var wh = window.innerHeight;
function selectGoing(x, y){
return Math.floor(Math.random() * (y - x + 1)) + x;
}
function selectshag(x, y){
return Math.floor(Math.random() * (y - x + 1)) + x;
}
function Start(){
var canvas = $('.canv').get(0);
var ctx = canvas.getContext('2d');
var array_points = [];
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
for (var i = 0; i <= 150; i++) {
array_points[i] = [];
array_points[i]['x'] = Math.random()/1*ww;
array_points[i]['y'] = Math.random()/1*wh;
array_points[i]['z'] = selectGoing(0, 7);
ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
}
setInterval(function(){
ctx.clearRect(0,0,ww,wh);
for (var i = 0; i <= 150; i++) {
var shag = 1;
switch(array_points[i]['z']) {
case 0: //вверх
if (array_points[i]['x'] + 0 < ww-3 && array_points[i]['y'] - shag < 0) {
array_points[i]['y'] = wh-3;
}
array_points[i]['x'] += 0;
array_points[i]['y'] -= shag;
break;
case 1: //вверх вправо
if(array_points[i]['x'] + shag/2 > ww-3){
array_points[i]['x'] = 0;
}
if(array_points[i]['y'] - shag/2 < 0){
array_points[i]['y'] = wh-3;
}
array_points[i]['x'] += shag/2;
array_points[i]['y'] -= shag/2;
break;
case 2: //вправо
if(array_points[i]['x'] + shag > ww-3){
array_points[i]['x'] = 0;
}
array_points[i]['x'] += shag;
array_points[i]['y'] += 0;
break;
case 3: //вниз вправо
if(array_points[i]['x'] + shag/2 > ww-3){
array_points[i]['x'] = 0;
}
if(array_points[i]['y'] + shag/2 > wh-3){
array_points[i]['y'] = 0;
}
array_points[i]['x'] += shag/2;
array_points[i]['y'] += shag/2;
break;
case 4: //вниз
if (array_points[i]['y'] + shag > wh-3) {
array_points[i]['y'] = 0;
}
array_points[i]['x'] -= 0;
array_points[i]['y'] += shag;
break;
case 5: //вниз вліво
if(array_points[i]['x'] - shag/2 < 3){
array_points[i]['x'] = ww-3
}
if(array_points[i]['y'] + shag/2 > wh-3){
array_points[i]['y'] = 0
}
array_points[i]['x'] -= shag/2;
array_points[i]['y'] += shag/2;
break;
case 6: //вліво
if (array_points[i]['x'] - shag < 3) {
array_points[i]['x'] = ww-3;
}
array_points[i]['x'] -= shag;
array_points[i]['y'] -= 0;
break;
case 7: //вверх вліво
if(array_points[i]['x'] - shag/2 < 3 ){
array_points[i]['x'] = ww-3;
}
if(array_points[i]['y'] - shag/2 < 3){
array_points[i]['y'] = wh-3;
}
array_points[i]['x'] -= shag/2;
array_points[i]['y'] -= shag/2;
break;
}
ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
}
ctx.clearRect(0,0,ww,wh);
ctx.beginPath();
for (var i = 0; i <= 150; i++) {
ctx.fillRect(array_points[i]['x'], array_points[i]['y'], 5, 5);
/*ctx.fillStyle = "#ffffff";
ctx.fillText(array_points[i]['z'], array_points[i]['x'], array_points[i]['y']);*/
var x2 = +array_points[i]['x'];
var y2 = +array_points[i]['y'];
var length = Math.pow(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2), 0.5);
if (length < 150) {
ctx.moveTo(x2, y2);
ctx.lineTo(x1, y1);
}
}
ctx.stroke();
}, 10);
$('.canv').on('mousemove', function(event){
x1 = event.offsetX;
y1 = event.offsetY;
});
}
function ResizeAll(){
ww = window.innerWidth;
wh = window.innerHeight;
$('.canv').attr('width', ww);
$('.canv').attr('height', wh);
$('.canv').css('width', ww);
$('.canv').css('height', wh);
Start();
}
$(document).ready(function(){
ResizeAll();
$(window).resize(function(){
ResizeAll();
});
});
</script>
<canvas class="canv" style="width: 100%; height: 100%;border: 1px solid black; margin: auto; background-color: black;" width="ww" height="wh">
var resize = function(e){
console.log(e);
};
(function(){
var time;
window.onresize = function(e){
if (time)
clearTimeout(time);
time = setTimeout(function(){
resize(e);
},1000);
}
})();
Как только Вы перестанете изменять размеры окна, через секунду после этого произойдет вызов вашей функции
Виртуальный выделенный сервер (VDS) становится отличным выбором
Вообщем не работает только из-за MAX(tecdoc_crosscross_num) + 1 Помогите пожалуйста найти решение
Очередная проблема с кодировкой, в таблице русские символы отображаются некорректно
Есть несколько инлайн блоков, которые размещаются по центру экрана, нужно выровнять третий по правому краю, не применяя свойство float (пример)