本篇文章主要介绍一下如何使用js脚本绘制波形(方波)动画.
1.写出代码框架.
<html>
<head>
<title>波形显示</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
</script>
</body>
</html>
2.在script标签里添加脚本函数.
//从0到0的方波段
function wav_squre_0_0(ctx, p)
{
ctx.lineTo(p.x+20, p.y);
p.x += 20;
}
//从0到1的方波段
function wav_squre_0_1(ctx, p)
{
ctx.lineTo(p.x, p.y-20);
ctx.lineTo(p.x+20, p.y-20);
p.x += 20;
p.y -= 20;
}
//从1到0的方波段
function wav_squre_1_0(ctx, p)
{
ctx.lineTo(p.x, p.y+20);
ctx.lineTo(p.x+20, p.y+20);
p.x += 20;
p.y += 20;
}
//从1到1的方波段
function wav_squre_1_1(ctx, p)
{
ctx.lineTo(p.x+20, p.y);
p.x += 20;
}
3.统一四段函数.
//组合四个函数为统一接口
function wav_squre_m_n(ctx, p, m, n)
{
if(m == '0' && n == '0')
{
wav_squre_0_0(ctx, p);
}
else if(m == '0' && n == '1')
{
wav_squre_0_1(ctx, p);
}
else if(m == '1' && n == '0')
{
wav_squre_1_0(ctx, p);
}
else if(m == '1' && n == '1')
{
wav_squre_1_1(ctx, p);
}
else
{
if(n == '0') wav_squre_0_0(ctx, p);
else wav_squre_0_1(ctx, p);
}
}
//用0和1的字符串绘制方波
function wav_squre_analysis(ctx, p, str)
{
var i = 0;
wav_squre_m_n(ctx, p, '0', str[0]);
for(i=1; i<str.length; i++)
{
wav_squre_m_n(ctx, p, str[i-1], str[i]);
}
}
4.更新绘制函数
function wav_squre_update()
{
var str = gstr.substr(k,12); //取其中12段为一个时长显示
ctx.clearRect(0,0,600,600);
ctx.beginPath();
ctx.moveTo(p.x, p.y);
//console.log(str);
wav_squre_analysis(ctx, p, str);
p.x = 100;
p.y = 100;
k += 1;
if(k >= gstr.length) clearInterval(m);
ctx.stroke();
}
5.绘制函数
function wav_squre_draw()
{
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
p.x = 100;
p.y = 100;
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
m = setInterval(wav_squre_update, 1000/60);
}
6.全局变量以及调用函数.
var gstr = "10101010101010101000001111000001101010100101001010101010100101010100101010100011100000000000000000000000000000000000000000000000001111111111111111111111111111111111111111111111110000000000000000000000000000000000000000000000111111111111111111111111111111111000000000000000000000000000000011111111111111111111111111111111111111000000000000000000000000000000111111111111111111111110000000000000000000000011111111111111111111110000000000000000010"; (波字符串)
var m;
var k = 0; //字符串偏移
var canvas;
var ctx;
var p = {}; //绘制点
wav_squre_draw();
6.最后附上完整源码.
<html>
<head>
<title>波形显示</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
var gstr = "10101010101010101000001111000001101010100101001010101010100101010100101010100011100000000000000000000000000000000000000000000000001111111111111111111111111111111111111111111111110000000000000000000000000000000000000000000000111111111111111111111111111111111000000000000000000000000000000011111111111111111111111111111111111111000000000000000000000000000000111111111111111111111110000000000000000000000011111111111111111111110000000000000000010";
var m;
var k = 0;
var canvas;
var ctx;
var p = {};
function wav_squre_0_0(ctx, p)
{
ctx.lineTo(p.x+20, p.y);
p.x += 20;
}
function wav_squre_0_1(ctx, p)
{
ctx.lineTo(p.x, p.y-20);
ctx.lineTo(p.x+20, p.y-20);
p.x += 20;
p.y -= 20;
}
function wav_squre_1_0(ctx, p)
{
ctx.lineTo(p.x, p.y+20);
ctx.lineTo(p.x+20, p.y+20);
p.x += 20;
p.y += 20;
}
function wav_squre_1_1(ctx, p)
{
ctx.lineTo(p.x+20, p.y);
p.x += 20;
}
function wav_squre_m_n(ctx, p, m, n)
{
if(m == '0' && n == '0')
{
wav_squre_0_0(ctx, p);
}
else if(m == '0' && n == '1')
{
wav_squre_0_1(ctx, p);
}
else if(m == '1' && n == '0')
{
wav_squre_1_0(ctx, p);
}
else if(m == '1' && n == '1')
{
wav_squre_1_1(ctx, p);
}
else
{
if(n == '0') wav_squre_0_0(ctx, p);
else wav_squre_0_1(ctx, p);
}
}
function wav_squre_analysis(ctx, p, str)
{
var i = 0;
wav_squre_m_n(ctx, p, '0', str[0]);
for(i=1; i<str.length; i++)
{
wav_squre_m_n(ctx, p, str[i-1], str[i]);
}
}
function wav_squre_update()
{
var str = gstr.substr(k,12);
ctx.clearRect(0,0,600,600);
ctx.beginPath();
ctx.moveTo(p.x, p.y);
//console.log(str);
wav_squre_analysis(ctx, p, str);
p.x = 100;
p.y = 100;
k += 1;
if(k >= gstr.length) clearInterval(m);
ctx.stroke();
}
function wav_squre_draw()
{
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
p.x = 100;
p.y = 100;
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
m = setInterval(wav_squre_update, 1000/60);
}
wav_squre_draw();
</script>
</body>
</html>
