这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 Javascript 绘制 sin 曲线过程, 需要的朋友可以参考下
Javascript 绘制 sin 曲线代码如下:
- <!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" width="400" height="400">
- </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 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" width="400" height="400">
- </canvas>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0415/275049.html