JavaScript 绘制 sin 曲线代码如下 :
<! doctype html> <html> <head> <style type = "text/css"> #mycanvas {background-color: cornflowerblue ؛ } </style> <script type = "text/javaScript"> daw 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"> </tanvas> </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 ؛ دالة 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"> </tanvas> </body> </html>