search

aashimgarg / animation-using-js

a rectangle will scale down and shrink as soon as you press any alphabet key!
7 stars 26 forks source link

Rotate the rectangle by 3 degress while shrinking down. #1

Open aashimgarg opened 5 years ago

aashimgarg commented 5 years ago

the rectangle should rotate by three degrees while it gets scaled down .

kk77777 commented 4 years ago

the rectangle should rotate by three degrees while it gets scaled down.

Want to work on this.

aashimgarg commented 4 years ago

yes you can!

anuratb commented 4 years ago

Can I address the issue

YashVadhadiya commented 3 years ago

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JS

`var earth = new Image(); function init() { earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { var ctx = document.getElementById('canvas').getContext('2d');

ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0, 0, 300, 300); ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150);

// Earth var time = new Date(); ctx.rotate(((2 Math.PI) / 60) time.getSeconds() + ((2 Math.PI) / 60000) time.getMilliseconds()); ctx.translate(105, 0);

ctx.drawImage(earth, -12, -12); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit ctx.stroke();

window.requestAnimationFrame(draw); }

init();`

May it will help.