coding untuk grafik SINUSOIDAL

Grafik Sinusoidal

<!DOCTYPE html> <html> <head> <title>Grafik Sinusoidal</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="500" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var angle = 0; // Membuat garis sumbu-x ctx.beginPath(); ctx.moveTo(0, height/2); ctx.lineTo(width, height/2); ctx.stroke(); // Membuat garis sumbu-y ctx.beginPath(); ctx.moveTo(width/2, 0); ctx.lineTo(width/2, height); ctx.stroke(); // Membuat garis tengah ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.lineWidth = 1; ctx.moveTo(0, height/2); ctx.lineTo(width, height/2); ctx.stroke(); // Menggambar grafik sinusoidal function draw() { ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = "red"; ctx.lineWidth = 2; for(var x = 0; x < width; x++) { var y = Math.sin((x - width/2 + angle) * 0.1) * height/4 + height/2; if (y < height/2) { ctx.strokeStyle = "blue"; } else { ctx.strokeStyle = "red"; } if(x === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.stroke(); angle += 0.2; requestAnimationFrame(draw); } draw(); </script> </body> </html>

SEPUTAR CODINGAN

Popular Posts

Flickr

Sponsor

Labels

coding untuk grafik SINUSOIDAL

About Ungu Fotocopy Cipayung Center

0 Comments:

Posting Komentar

Popular Posts

Flickr

Sponsor

Labels

coding untuk grafik SINUSOIDAL

About Ungu Fotocopy Cipayung Center

RELATED POSTS

0 Comments:

Posting Komentar