Язык программирования:
Javascript
Среда программирования:
Visual Studio Code
<html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <div align = "center"> <canvas id="canvas" width = "500px" height = "500px"></canvas> </div> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var size = 50; //размер var scale = 1; // масштабирование var fscale = scale; var speed = 1; // скорость анимации var dir = 1; // направление движения var rotation = Math.PI/2; // угол и направление вращения function play(){ //анимация now = Date.now(); dt = (now - last)/1000; render(); update(dt); requestAnimationFrame(play); last = now; } function update(dt){ scale += dir*speed*dt; if(scale >= 2*fscale){ dir *= -1; } if(scale < 1*fscale){ dir *= -1; rotation *= -1; } } function render(){//отрисовка всех квадратов ctx.fillStyle = 'black'; ctx.fillRect(0,0,canvas.width, canvas.height); for(var i = -canvas.width/2; i <= canvas.width/2; i+=size){ for(var j = -canvas.height/2; j <= canvas.height/2; j+=size){ drawCenterSquare(i, j, size, 0, scale, rotation); } } } function drawCenterSquare(centerX, centerY, size, fill=0, scale=1, angle=0){ var v1x = (centerX - size/2)*scale, v2x = (centerX + size/2)*scale, v3x = (centerX + size/2)*scale, v4x = (centerX - size/2)*scale, v1y = (centerY - size/2)*scale, v2y = (centerY - size/2)*scale, v3y = (centerY + size/2)*scale, v4y = (centerY + size/2)*scale; var t1x = v1x, t2x = v2x, t1y = v1y, t2y = v3y; v1x = (t1x-centerX)*Math.cos(angle) - (t1y-centerY)*Math.sin(angle) + centerX; v1y = (t1x-centerX)*Math.sin(angle) + (t1y-centerY)*Math.cos(angle) + centerY; v2x = (t2x-centerX)*Math.cos(angle) - (t1y-centerY)*Math.sin(angle) + centerX; v2y = (t2x-centerX)*Math.sin(angle) + (t1y-centerY)*Math.cos(angle) + centerY; v3x = (t2x-centerX)*Math.cos(angle) - (t2y-centerY)*Math.sin(angle) + centerX; v3y = (t2x-centerX)*Math.sin(angle) + (t2y-centerY)*Math.cos(angle) + centerY; v4x = (t1x-centerX)*Math.cos(angle) - (t2y-centerY)*Math.sin(angle) + centerX; v4y = (t1x-centerX)*Math.sin(angle) + (t2y-centerY)*Math.cos(angle) + centerY; ctx.lineWidth = '2'; ctx.strokeStyle = 'white'; ctx.fillStyle = 'black'; ctx.beginPath(); ctx.moveTo(canvas.width/2 + v1x, canvas.height/2 - v1y); ctx.lineTo(canvas.width/2 + v2x, canvas.height/2 - v2y); ctx.lineTo(canvas.width/2 + v3x, canvas.height/2 - v3y); ctx.lineTo(canvas.width/2 + v4x, canvas.height/2 - v4y); ctx.closePath(); if(fill == 1) ctx.fill(); ctx.stroke(); } var last = Date.now(); play(); </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
Borseitov_moving_square.zip | 1.17 кб |