Язык программирования:
Javascript
Среда программирования:
webshtorm
<!doctype html> <html> <head> <title>Fun dots</title> <meta charset='utf-8' /> </head> <body style="margin:0px;"> <canvas id="canvas" style="background-color:black;width:500px;height:500px;position:absolute;left:50%;margin-left:-250px;top:50%;margin-top:-250px;">Обновите браузер</canvas> <script> var ctx = document.getElementById('canvas').getContext('2d'); var canvas = document.getElementById('canvas'); var sizeCanvas = 500; //РАзмер канваса canvas.width = sizeCanvas; // присваеваем длинну и ширину canvas.height = sizeCanvas; var radius = 10; // радиус 1 шарика var otstupx = 30; // отступ от шариков по х кординатам var otstupy = 15; // по у кординатам отступ var strokeWidth =7; // ширина рамки шарика var speed = 1.3; // скорость мигания var rectX = parseInt(sizeCanvas/(radius*2+otstupx)+1,10); // сколько шариков надо на размер канваса по х var rectY = parseInt(sizeCanvas/(radius*2+otstupy)+1,10); // тоже самое по у var c = new Array(); // делаем ассоциативный массив в котором будут хранится все кординаты каждого шарика var ccX =0; // изменяемая переменная содержит коодинаты анимированых кругов var colori=0; // итая переменная для изменения цвета для мигания например: color[colori] var str = strokeWidth; // изменяемая переменная для рамки шарика var color = ['#64C6DC','#F1BE41','#C94C44']; // сам массив с цветами для анимации initCircles(); // задаем координаты всем шарикам и записываем их в ассоциативный массив /* в массиве в каждом итом элементе - объект который содержит х-кординату у-кординату итый и житый номер, так если бы они были в матрице и цвет */ setInterval(function(){ // задаем интервал для анимации ccX+=speed; // изменяемая переменная draw(color[colori]); //функция для прорисовки анимированых кружков передаем в нее цвет тех кружков которые надо анимировать if(ccX>otstupx){ // если ширина анимированого кружка больше чем отступ то обнулем изменяемую переменную и обнуляем ширину рамки ccX=radius; str=strokeWidth; if(colori<color.length-1) // тут идем дальше по цвету массив колор colori++; else colori=0; } if(ccX>otstupx-strokeWidth && ccX<otstupx){ // при подходе к концу анимации ширина рамки изменяется в этом if мы вычисляем ее ширину str=otstupx-ccX; } },30); function initCircles(){ var colormas1 = ['#64C6DC','#F1BE41','#C94C44']; // массив на четную строку шариков var colormas2 = ['#64C6DC','#F1BE41','#C94C44']; // на нечетную y=0; for(var i=0; i<rectY; i++, y+=radius*2+otstupy){ var color = 0; // переменная выступает как итый элемент для массива колор if(i%2==0){ // четная или нечетная строка x=0; for(var j=0; j<rectX; j++, x+=radius*2+otstupx){ c.push({"x":x,"y":y,"color":colormas1[color]}); // запушиваем в массив с шариками новый шарик color++; // цвет меняем на другой if(color>=colormas1.length){ // если массив с цветом подходит к концу то его обнуляем color=0; } } }else{ //x=0; x=0-((radius+otstupx/2)*3); // тут делаем отступ в 2,5 шарика чтоб нечетная строка была со смещением for(var j=0; j<rectX+radius+otstupx; j++, x+=radius*2+otstupx){ c.push({"x":x,"y":y,"color":colormas2[color],"i":i,"j":j}); // так же запушиваем и проверяем color++; if(color>=colormas2.length){ color=0; } } } } } function drawCircles(){ //тут рисуем шарики без анимации ctx.clearRect(0, 0, canvas.width, canvas.height); for(var i=0; i < c.length; i++){ // каждый элемент масива с шариками прорисовываем ctx.beginPath(); ctx.arc(c[i].x, c[i].y, radius, 0, 2*Math.PI, false); ctx.lineWidth = 1; ctx.fillStyle = c[i].color; ctx.fill(); ctx.strokeStyle = c[i].color; ctx.stroke(); } } function draw(color) { // функция для прорисовки анимации каждого шарика ctx.fillStyle = 'black'; ctx.fill(); // заливаем все черным ctx.clearRect(0,0,500,500); //очищаем drawCircles(); // функция для прориросвки обычных шариков которые без анимации for(var i=0; i < c.length; i++){ if(c[i].color == color){ // т.к. в функцию передается цвет к шарикам котрые надо анимировать тут мы выполняем проверку подходит шарик или нет ctx.beginPath(); ctx.arc(c[i].x, c[i].y, ccX, 0, 2*Math.PI, false); ctx.lineWidth = str; ctx.strokeStyle = c[i].color; ctx.stroke(); } } } </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| Fun dots.zip | 4.23 кб |