JavaScript绘制sin：：
<！doctype html> <html> <head> <style type =“ text/css”> #mycanvas {background-color：cornflowerblue; } </style> <script type =“ text/javascript”>函数draw（）{var my_canvas = document.getElementById（“ mycanvas”）; var content = my_canvas.getContext（“ 2d”）; content.beginath（）; content.moveto（10，100）; for（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> </hody> </html>动态效果：
<！doctype html> <html> <head> <style type =“ text/css”> #mycanvas {background-color：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.beginath（）; 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）;在