制作有趣的网页
canvas中动态画调幅曲线
调幅AM，就是一个正弦曲线的幅度是随一种规律变化，比如声音或图像，因此就把声音信息或图像信息通过这个固定频率的信号传输出去了。一般情况下，使用的固定频率比较高，比要传输的声音或图像信号高很多，这个固定频率被称为载频，而这个载频的幅度则随着要传输的信号而变化。调幅是无线发射经常使用的一种方式，比如广播电视，收音机就有一个频段称为AM，其实普通收音机除了特定的调频频段，其他频段都是使用调幅方式实现的，这是因为实现起来比较简单，成本低，可以满足大部分情况下的声音传输需要。而电视信号，不用机顶盒的那种普通电视传输，也基本上是用调幅方式来传输图像，但经过了一些附加处理。
如果直接看AM信号，比如传输声音或图像的AM信号，因为声音或图像幅度一直在变化，而且没有规律，就难以看清楚其特性，因此一般都是以一种有规律的信号来替代声音或视频信号对载频进行调幅，而使用的这个信号一般也是一个正弦波，不过是频率比载频频率低得多的正弦波，这就可以看清楚其幅度的变化了。
从图中可以看出，整个图像就是一个正弦波形式，但其幅度不是固定的，而是以正弦波的规律在不断变化。
在前面的正弦波绘制函数基础上，加上一部分改变，就能达到这种效果：
当然，也可以用这种方式显示两种不同频率正弦波的叠加，或其他一些图形，不过限于浏览器的计算绘制都需要一定时间，过于复杂的计算会影响动画效果，但静态曲线问题则不大。
如果直接看AM信号，比如传输声音或图像的AM信号，因为声音或图像幅度一直在变化，而且没有规律，就难以看清楚其特性，因此一般都是以一种有规律的信号来替代声音或视频信号对载频进行调幅，而使用的这个信号一般也是一个正弦波，不过是频率比载频频率低得多的正弦波，这就可以看清楚其幅度的变化了。
从图中可以看出，整个图像就是一个正弦波形式，但其幅度不是固定的，而是以正弦波的规律在不断变化。
在前面的正弦波绘制函数基础上，加上一部分改变，就能达到这种效果：
function draw(ctx,t){
let y;
ctx.beginPath();
ctx.moveTo(0,h);
for(let x=0;x<canvas.width;x++){
y=h*Math.sin(k*(x+t))*Math.sin(15*k*x)/2;
ctx.lineTo(x,y+h);
}
context.stroke();
}
可以发现，真正修改的只是y坐标的计算部分，把正弦的y=h*Math.sin(k*(x+t))/2添加乘积项Math.sin(15*k*x)，这部分表示一个固定的载频频率，其频率是幅度变化的15倍。只需要修改这一点就可以达到上面的效果。完整代码为：<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="gb18030" />
<title>调幅波AM</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;
ctx.beginPath();
ctx.moveTo(0,h);
for(let x=0;x<canvas.width;x++){
y=h*Math.sin(k*(x+t))*Math.sin(15*k*x)/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>
把以上代码存为一个html文件，然后在浏览器中打开此文件就可以看到上面的动画图像。当然，也可以修改其中使用的参数，不过为了动画比较可看，一些参数不能取得过大，比如载频频率，不然可能影响显示效果。当然，也可以用这种方式显示两种不同频率正弦波的叠加，或其他一些图形，不过限于浏览器的计算绘制都需要一定时间，过于复杂的计算会影响动画效果，但静态曲线问题则不大。