制作有趣的网页
canvas中动态画正弦曲线
HTML5加入的canvas画布，有很多出色的功能，比如绘制一些函数曲线。函数曲线中正弦余弦曲线为周期性的，幅度在±1之间，比较容易绘制。而且余弦曲线与正弦曲线只是相差90度而已，可以认为是初始相位有差别。绘制函数为：
绘图函数中，是根据横坐标x，依次根据公式y=h*sin(k*(x+t))/2计算对应的y值，然后把每个点(x,y)依次连接起来，而形成曲线。其中t为曲线的初始相位，这也是每次迭代的累加变量，公式中还有两个参数h和k，分别为曲线幅度系数和整个画布显示的函数周期系数，这里把这两个参数作为全局变量来使用，而没有作为参数传递，其实效果是一样的，如果严格按函数式编程，需要再加上这两个参数。
JavaScript中，内置的Math类有很多方法，主要是一些函数计算或数学常数，包括三角函数、指数对数函数、平方根等，而es6新标准中还加入了双曲函数、立方根、符号函数等，使用时都需要加上Math.的前缀。而圆周率，在JavaScript中为Math.PI，因为JavaScript中的三角函数单位是弧度，所以经常需要用radian=degree*Math.PI/180来实现角度与弧度的转换。
这样，包括HTML代码的整个页面为：
context.lineWidth=2设置绘制曲线宽2个像素，context.strokeStyle则设置绘制颜色，#336699为RGB三色的十六进制值组成的字串，每两位代表一种颜色的十六进制数值，可以通过这个改变这个值来改变曲线颜色。
后面就是一个canvas动画绘制框架了，每次绘制前使用context.clearRect()方法清除之前的图，避免每次绘制的图叠加在一起，这样显示的动画就是每次初始相位增加1，效果像三角函数曲线在一直向前走。而当step值大于canvas宽度后，step值恢复0，所以一直在循环运行，直到关闭页面窗口。
把上述代码存为html文件，如sin.html，因为没有引入的文件可以存到任意位置，比如桌面，然后鼠标双击就能打开，不过一般情况下是存到本地计算机中的虚拟网站中，然后点击打开此文件就会在默认浏览器中运行，可看到一条三角函数曲线在一直向前运动。
function draw(ctx,t){
let y,start=h*Math.sin(k*t)/2;
ctx.beginPath();
ctx.moveTo(0,h+start);
for(let x=0;x<canvas.width;x++){
y=h*Math.sin(k*(x+t))/2;
ctx.lineTo(x,y+h);
}
context.stroke();
}绘图函数中，是根据横坐标x，依次根据公式y=h*sin(k*(x+t))/2计算对应的y值，然后把每个点(x,y)依次连接起来，而形成曲线。其中t为曲线的初始相位，这也是每次迭代的累加变量，公式中还有两个参数h和k，分别为曲线幅度系数和整个画布显示的函数周期系数，这里把这两个参数作为全局变量来使用，而没有作为参数传递，其实效果是一样的，如果严格按函数式编程，需要再加上这两个参数。
JavaScript中，内置的Math类有很多方法，主要是一些函数计算或数学常数，包括三角函数、指数对数函数、平方根等，而es6新标准中还加入了双曲函数、立方根、符号函数等，使用时都需要加上Math.的前缀。而圆周率，在JavaScript中为Math.PI，因为JavaScript中的三角函数单位是弧度，所以经常需要用radian=degree*Math.PI/180来实现角度与弧度的转换。
这样，包括HTML代码的整个页面为：
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="gb18030" />
<title>正弦波</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"> 你使用的浏览器不支持需要的功能，请升级或更换！</canvas>
<script type="text/javascript">
const canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
h=canvas.height/2,
k=4*Math.PI/canvas.width;
function draw(ctx,t){
let y,start=h*Math.sin(k*t)/2;
ctx.beginPath();
ctx.moveTo(0,h+start);
for(let x=0;x<canvas.width;x++){
y=h*Math.sin(k*(x+t))/2;
ctx.lineTo(x,y+h);
}
context.stroke();
}
window.onload=function(){
context.lineWidth=2;
context.strokeStyle="#336699";
let step=0;
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
context.clearRect(0,0,canvas.width,canvas.height);
draw(context,step);
step+=1;
if(step>canvas.width) step=0;
}());
};
</script>
</body>
</html>
其中，幅度系数变量h为canvas的半高，而周期系数变量k为显示两个周期，可以通过修改这两个变量的值来调整曲线的幅度和显示周期。context.lineWidth=2设置绘制曲线宽2个像素，context.strokeStyle则设置绘制颜色，#336699为RGB三色的十六进制值组成的字串，每两位代表一种颜色的十六进制数值，可以通过这个改变这个值来改变曲线颜色。
后面就是一个canvas动画绘制框架了，每次绘制前使用context.clearRect()方法清除之前的图，避免每次绘制的图叠加在一起，这样显示的动画就是每次初始相位增加1，效果像三角函数曲线在一直向前走。而当step值大于canvas宽度后，step值恢复0，所以一直在循环运行，直到关闭页面窗口。
把上述代码存为html文件，如sin.html，因为没有引入的文件可以存到任意位置，比如桌面，然后鼠标双击就能打开，不过一般情况下是存到本地计算机中的虚拟网站中，然后点击打开此文件就会在默认浏览器中运行，可看到一条三角函数曲线在一直向前运动。