JavaScript 绘制 Sin 曲线代码如下：
<! doctype html> <html> <head> <style type = "text/css"> #mycanvas {พื้นหลังสี: cornflowerblue; } </style> <script type = "text/javascript"> ฟังก์ชัน draw () {var my_canvas = document.getElementById ("mycanvas"); var content = my_canvas.getContext ("2d"); content.beginpath (); content.moveto (10, 100); สำหรับ (var i = 1; i <200; i += 0.1) {var x = i * 10; var y = math.sin (i) * 10 + 100; content.lineto (x, y); } content.stroke (); content.closepath (); } </script> </head> <body onload = "draw ()"> <canvas id = "mycanvas"> </canvas> </body> </html>动态效果：
<! doctype html> <html> <head> <style type = "text/css"> #mycanvas {พื้นหลังสี: cornflowerblue; } </style> <script type = "text/javascript"> var i = 1; var x = 1; var y = 100; ฟังก์ชั่น movesin () {var my_canvas = document.getElementById ("mycanvas"); var content = my_canvas.getContext ("2d"); content.beginpath (); content.moveto (x, y); i += 0.1; x = i * 10; y = math.sin (i) * 10 + 100; content.lineto (x, y); content.stroke (); content.closepath (); } setInterval (movesin, 10); </script> </head> <body onload = "movesin ()"> <canvas id = "mycanvas"> </canvas> </body> </html>