Today’s tutorial is about using canvas with the javascript script with the use of the mathematical sin function.
This JavaScript code is simple to understand.
Start with the HTML5 source code:
|
1 |
<canvas id="id_canvas"></canvas> |
Use this javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
can=document.getElementById("id_canvas"); x=can.getContext("2d"); can.width=640; can.height=480; S=Math.sin; frames = 30; w2 = 640; update_draw=()=>{ for(x.fillRect(0,0,i=(w=w2),i);i--;){ x.clearRect(S(time_run),S(time_run)*w,w,1) } time_run+=1/frames requestAnimationFrame(update_draw) } time_run=0 update_draw() |
The definition of variables and function sin is easy to understand.
The first fillRect will create the area of drawing and the clearRect will draw it.
The line is drawn with the sin function called like S under time_run with a size of w.
The result can be found here:
See the Pen canvas_sin by Cătălin George Feștilă (@catafest) on CodePen.