Good day everyone. Recently studied canvass, and now I try to make it adaptive, just to practice. The problem with resize () is the start of the Start () function, with new parameters of length and height (because it was not possible to change them dynamically. In this canvas, there are several timers and events, well, after the resize, this function starts again, but timers and events do not stop working - the pictures are superimposed one on another, and with a large number of resizes it starts to hang, well, well, so how can I turn off all events inside Start when the window is resized? Here is the code:
<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"> 