Язык программирования:
Javascript
Среда программирования:
Любая
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body style="margin: 0; height: 100vh;"> <script type="text/javascript"> var canvasElem= document.createElement('canvas'); //создаем канвас canvasElem.id = "canvas"; canvasElem.width = 600; canvasElem.height = 600; canvasElem.style.margin = 'auto'; canvasElem.style.display = 'flex'; document.body.appendChild(canvasElem); canvas = canvasElem.getContext('2d'); canvasX = canvasElem.width; canvasY = canvasElem.height; var t1=0,ang=0,ang1=0; function draw() { if (ang>=-14.2*Math.PI) { canvas.clearRect(0,0,600,600); ang-=Math.PI/2; t1+=25/29; canvas.fillStyle='black'; canvas.beginPath(); //1 этап- анимируем квадраты canvas.moveTo(225-35*Math.cos((ang+45)*Math.PI/180)+12/5*t1,125-35*Math.sin((ang+45)*Math.PI/180)-t1); canvas.lineTo(225+35*Math.cos((ang+135)*Math.PI/180)+12/5*t1,125+35*Math.sin((ang+135)*Math.PI/180)-t1); canvas.lineTo(225+35*Math.cos((ang+45)*Math.PI/180)+12/5*t1,125+35*Math.sin((ang+45)*Math.PI/180)-t1); canvas.lineTo(225-35*Math.cos((ang+135)*Math.PI/180)+12/5*t1,125-35*Math.sin((ang+135)*Math.PI/180)-t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(285-35*Math.cos((ang+90)*Math.PI/180)+12/5*t1,100-35*Math.sin((ang+90)*Math.PI/180)+t1); canvas.lineTo(285+35*Math.cos(ang*Math.PI/180)+12/5*t1,100+35*Math.sin(ang*Math.PI/180)+t1); canvas.lineTo(285+35*Math.cos((ang+90)*Math.PI/180)+12/5*t1,100+35*Math.sin((ang+90)*Math.PI/180)+t1); canvas.lineTo(285-35*Math.cos(ang*Math.PI/180)+12/5*t1,100-35*Math.sin(ang*Math.PI/180)+t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(345-35*Math.cos((ang+45)*Math.PI/180)+t1,125-35*Math.sin((ang+45)*Math.PI/180)+12/5*t1); canvas.lineTo(345+35*Math.cos((ang+135)*Math.PI/180)+t1,125+35*Math.sin((ang+135)*Math.PI/180)+12/5*t1); canvas.lineTo(345+35*Math.cos((ang+45)*Math.PI/180)+t1,125+35*Math.sin((ang+45)*Math.PI/180)+12/5*t1); canvas.lineTo(345-35*Math.cos((ang+135)*Math.PI/180)+t1,125-35*Math.sin((ang+135)*Math.PI/180)+12/5*t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(370-35*Math.cos((ang+90)*Math.PI/180)-t1,185-35*Math.sin((ang+90)*Math.PI/180)+12/5*t1); canvas.lineTo(370+35*Math.cos(ang*Math.PI/180)-t1,185+35*Math.sin(ang*Math.PI/180)+12/5*t1); canvas.lineTo(370+35*Math.cos((ang+90)*Math.PI/180)-t1,185+35*Math.sin((ang+90)*Math.PI/180)+12/5*t1); canvas.lineTo(370-35*Math.cos(ang*Math.PI/180)-t1,185-35*Math.sin(ang*Math.PI/180)+12/5*t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(345-35*Math.cos((-ang+45)*Math.PI/180)-12/5*t1,245-35*Math.sin((-ang+45)*Math.PI/180)+t1); canvas.lineTo(345+35*Math.cos((-ang+135)*Math.PI/180)-12/5*t1,245+35*Math.sin((-ang+135)*Math.PI/180)+t1); canvas.lineTo(345+35*Math.cos((-ang+45)*Math.PI/180)-12/5*t1,245+35*Math.sin((-ang+45)*Math.PI/180)+t1); canvas.lineTo(345-35*Math.cos((-ang+135)*Math.PI/180)-12/5*t1,245-35*Math.sin((-ang+135)*Math.PI/180)+t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(285-35*Math.cos((-ang+90)*Math.PI/180)-12/5*t1,270-35*Math.sin((-ang+90)*Math.PI/180)-t1); canvas.lineTo(285+35*Math.cos(-ang*Math.PI/180)-12/5*t1,270+35*Math.sin(-ang*Math.PI/180)-t1); canvas.lineTo(285+35*Math.cos((-ang+90)*Math.PI/180)-12/5*t1,270+35*Math.sin((-ang+90)*Math.PI/180)-t1); canvas.lineTo(285-35*Math.cos(-ang*Math.PI/180)-12/5*t1,270-35*Math.sin(-ang*Math.PI/180)-t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(225-35*Math.cos((-ang+45)*Math.PI/180)-t1,245-35*Math.sin((-ang+45)*Math.PI/180)-12/5*t1); canvas.lineTo(225+35*Math.cos((-ang+135)*Math.PI/180)-t1,245+35*Math.sin((-ang+135)*Math.PI/180)-12/5*t1); canvas.lineTo(225+35*Math.cos((-ang+45)*Math.PI/180)-t1,245+35*Math.sin((-ang+45)*Math.PI/180)-12/5*t1); canvas.lineTo(225-35*Math.cos((-ang+135)*Math.PI/180)-t1,245-35*Math.sin((-ang+135)*Math.PI/180)-12/5*t1); canvas.closePath(); canvas.stroke(); canvas.fill(); canvas.beginPath(); canvas.moveTo(200-35*Math.cos((-ang+90)*Math.PI/180)+t1,185-35*Math.sin((-ang+90)*Math.PI/180)-12/5*t1); canvas.lineTo(200+35*Math.cos(-ang*Math.PI/180)+t1,185+35*Math.sin(-ang*Math.PI/180)-12/5*t1); canvas.lineTo(200+35*Math.cos((-ang+90)*Math.PI/180)+t1,185+35*Math.sin((-ang+90)*Math.PI/180)-12/5*t1); canvas.lineTo(200-35*Math.cos(-ang*Math.PI/180)+t1,185-35*Math.sin(-ang*Math.PI/180)-12/5*t1); canvas.closePath(); canvas.stroke(); canvas.fill(); } else if (ang1>=-14.2*Math.PI) { canvas.clearRect(0,0,600,600); canvas.beginPath(); //2 этап- анимация звезды (285,185) canvas.moveTo(200,100); canvas.lineTo(250,100); canvas.lineTo(285,65); canvas.lineTo(320,100); canvas.lineTo(370,100); canvas.lineTo(370,150); canvas.lineTo(405,185); canvas.lineTo(370,220); canvas.lineTo(370,270); canvas.lineTo(320,270); canvas.lineTo(285,305); canvas.lineTo(250,270); canvas.lineTo(200,270); canvas.lineTo(200,220); canvas.lineTo(165,185); canvas.lineTo(200,150); canvas.closePath(); canvas.stroke(); canvas.fillStyle='black'; canvas.fill(); ang1-=Math.PI/2; canvas.beginPath(); canvas.moveTo(285-35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180),185-85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+50*Math.sin(-ang1*Math.PI/180),185-50*Math.cos(-ang1*Math.PI/180)); canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180),185-85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+50*Math.cos(-ang1*Math.PI/180),185+50*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)+85*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285+35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180),185+85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-50*Math.sin(-ang1*Math.PI/180),185+50*Math.cos(-ang1*Math.PI/180)); canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180),185+85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-85*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180),185+35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-50*Math.cos(-ang1*Math.PI/180),185-50*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-85*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)-85*Math.sin(-ang1*Math.PI/180)); canvas.lineTo(285-35*Math.cos(-ang1*Math.PI/180)+35*Math.sin(-ang1*Math.PI/180),185-35*Math.cos(-ang1*Math.PI/180)-35*Math.sin(-ang1*Math.PI/180)); canvas.closePath(); canvas.stroke(); canvas.fillStyle='white'; canvas.fill(); } else { t1=0; ang=0; ang1=0; } } draw(); setInterval(draw, 50); //производим анимацию </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
Square and Star.rar | 1.19 кб |