JavaScript
<！doctype html> <html> <head> <style type = "text/css"> #mycanvas {background-color：cornflowerblue; } </style> <script type = "text/javascript"> function draw（）{var my_canvas = document.getElementById（ "mycanvas"）; var content = my_canvas.getContext（ "2d"）; content.beginPath（）; 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> </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; function movevesin（）{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>