CANVAS １０１

Hi! Happy new year It's been a long time. Few days ago, I saw a super project, the Author reproduce a window XP desktop layout It's really coooool. Makes me want to do one too

But, it seemed to be very complicated So I took some time to build another thing first Which is... a screen saver! Speaking of which, we used to need screen saver to protect screen from damage Because old screen tech is not that well It seems less need for screen saver for new screen.

This time I use canvas to make a animation A DVD Logo moving around on screen When it hit the edge, it will change direction and color and keep moving Here's how it works

Briefly explain for this animation First thing first, you need a logo And I use canvas api to make one 🙋‍♂️ Mostly refer to MDNCanvas api Using LineTo and arcTo two methods to draw lines To make "D V D" these three letters. Added below is a horizontal oval (ellipse method) and text (fillText) Finally put some color on it by fillStyle

And the second part is animation: making logo moves This technique needs to make Logo's position(x,y) keep updating We can use requestAnimationFrame to do that.

In next post of Canvas 101 I'll explain about two parts. First one is drawing with canvas and the other is update animation 👍

This is today's sharing 👋