Язык программирования:
Javascript
Среда программирования:
HTML5 + JS
<head> </head> <body style="background: #000"> <form id="frm1" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form> <form id="frm2" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form> <form id="frm3" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form> <button onclick="extract()" style="z-index:100;position:relative; left: 0px; top: 0px">go</button> <canvas id="myCanvas" style="background: #000; z-index:1; position:absolute; left: 0px; top: 0px"></canvas> <canvas id="myCanvas2" style="background: rgba(0,0,0,0); z-index:2; position:absolute; left: 0px; top: 0px"></canvas> </body> <script> /*** формы для ввода параметров, запуск по нажатию enter ***/ document.addEventListener("keypress", function(e){if(e.keyCode==13){e.preventDefault();extract();}}) var speed1 = 0.1 var speed2 = 0.25 var speed3 = 0.1 function extract() { ctx2.clearRect(-w/2,-h/2, w, h) t1 = speed1; t2 = speed2; t3 = speed3 ctx2.beginPath() trig = false ctx2.moveTo(300,0) speed1 = parseFloat(document.getElementById("frm1").elements[0].value); speed2 = parseFloat(document.getElementById("frm2").elements[0].value); speed3 = parseFloat(document.getElementById("frm3").elements[0].value); } canvas = document.getElementById("myCanvas") //2 холста. 1ый - обновляемая анимация спирографа canvas2 = document.getElementById("myCanvas2") //2ой - статическая отрисовка траектории ctx = canvas.getContext("2d") ctx2 = canvas2.getContext("2d") w = canvas2.width = canvas.width = window.innerWidth h = canvas2.height = canvas.height = window.innerHeight ctx.lineWidth = 2 ctx2.lineWidth = 4 ctx.fillStyle = '#fff' ctx2.fillStyle = '#fff' ctx.strokeStyle = '#fff' ctx2.strokeStyle = '#fff' var t1 = speed1, t2 = speed2, t3 = speed3 // парматры (скорость движения плеч спирографа) var trig = false var e = 1 ctx.translate(w/2,h/2) ctx2.translate(w/2,h/2) var circle = Math.PI*2 ctx2.beginPath() ctx2.moveTo(300,0) function draw(){ ctx.clearRect(-w/2,-h/2, w, h) //очищаем canvas (только 1ый) ctx.beginPath() ctx.moveTo(0,0) //рисуем плечи ctx.lineTo(100*Math.cos(t1), 100*Math.sin(t1)) ctx.lineTo(100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t2)+100*Math.sin(t1)) ctx.lineTo(100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1)) ctx.stroke() ctx.closePath() //рисуем шарики ctx.beginPath() ctx.arc(100*Math.cos(t1), 100*Math.sin(t1), 7, 0, Math.PI*2) ctx.fill() ctx.closePath() ctx.beginPath() ctx.arc(100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t2)+100*Math.sin(t1), 7, 0, Math.PI*2) ctx.arc(100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1),7, 0, Math.PI*2) ctx.fill() ctx.closePath() if(!trig){//оптимизация - перестаем отрисовывать, если траектория замкнулась //отрисовываем траекторию на 2м canvas var x = 100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1) var y = 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1) ctx2.lineTo(x,y) ctx2.stroke() } if(x>300-e&&x<300+e&&y>-e&&y<e){ctx2.closePath();trig=true} // траектория замкнулась? t1=(t1+speed1)%circle; t2=(t2+speed2)%circle; t3=(t3+speed3)%circle //инкремент соответствующих переменных requestAnimationFrame(draw) } draw() </script>
| Прикрепленный файл | Размер |
|---|---|
| sirota_spirograph.rar | 1.38 кб |