# 《每周一点canvas动画》——波形运动

1. 平滑运动

2. 线性运动

3. 脉冲运动

### 1.Sin函数的波形

sin函数的波形想必骚年们不会感到陌生，其图形如下所示：

``````    for(var angle=0; angle<Math.PI*2; angle+=0.1){
console.log(Math.sin(angle)); //打印出角度对应的sin值
}``````

### 1.平滑运动

``````//水草类
function Aqu(color, num, amp){
this.startPoint = [];
this.endPointX = [];
this.endPointY = [];
this.amp = [];
this.beta = 0;
this.color = (color == undefined)?"#3b154e":color;
this.num = (num == undefined)?80:num;
}

Aqu.prototype.init = function(){
for(var i=0; i<this.num; i++){
this.startPoint[i] = Math.random()*20 + i*10;
this.endPointX[i] = this.startPoint[i];
this.endPointY[i] = canvas.height/1.5 - Math.random()*50;
this.amp[i] = Math.random()*10 + 40;
}
}

Aqu.prototype.draw = function(ctx){
ctx.save();
ctx.lineWidth = 14;
ctx.lineCap = "round";
ctx.globalAlpha = 0.8;
ctx.strokeStyle =this.color;

//Math.sin的应用
this.beta += del*0.0012;
var l = Math.sin(this.beta);

for(var i=0; i<this.num; i++){
ctx.beginPath();
ctx.moveTo(this.startPoint[i], canvas.height);

//周期性改变水草的顶点X坐标
this.endPointX[i] = this.startPoint[i] + l*this.amp[i]

ctx.stroke();
}
ctx.restore();
}

var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
canvas.height = 400;
canvas.width = 800;

//实例水草
var oAqu = new Aqu();
//初始化
oAqu.init();

var oldTime = new Date().getTime(),
del = null, newTime = null;

(function drawFrmae(){
window.requestAnimationFrame(drawFrmae);
ctx.clearRect(0, 0, canvas.width, canvas.height);

newTime = new Date().getTime();
del = new Date().getTime() - oldTime;
oldTime = newTime;

oAqu.draw(ctx);
}())``````

### 2.线性运动

``````   <script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

var angle = 0,
range = 50,
xspeed = 1,
yspeed = 0.05;

var ball = new Ball();

(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);

ball.x += xspeed; //水平，沿x轴方向水平运动

}
//垂直， 由于angle角度没发生变化，所以纵坐标保持不变
ball.y = canvas.height/2+Math.sin(angle)*range;

// angle += 0.05; //取消注释看看发生了什么？
ball.draw(context);
})();
}
</script>``````

### 3.脉冲运动

``````window.onload = function(){
var canvas = document.getElementById('canvas');
var context  = canvas.getContext('2d');

var angle = 0,
range = 0.5,
speed = 0.05,
centerScale = 1;

var ball = new Ball();
ball.x = canvas.width/2;
ball.y = canvas.height/2;

(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);

//sin值的变化，导致 ball.scaleX ， ball.scaleY属性变化
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle)*range;
angle += speed;

ball.draw(context);
})();
}``````

#### 你可能感兴趣的

18 条评论
viola · 2016年08月16日

ball.js里面调用的utils.parseColor()貌似没定义啊，从前面三篇顺序看过来的话……

+4 回复

+2 回复

cody1991 · 2016年08月22日
``````//显示距离
log.style.left = (mouse.x + rect.x)/2 + 'px';
``````

left 不需要除以2吧，看起来效果更好

+1 回复

+1 回复

kita酱 · 2016年09月19日

utils.js 里没有这个utils.parseColor(color)属性呢

+1 回复

cody1991 · 2016年08月24日

fangxianzheng · 2016年09月09日

utils.parseColor() 可以去作者源文件里看，在github里

this亦然 · 2016年09月28日

this亦然 · 2016年09月28日

tsingfunlee · 2016年10月24日

tsingfunlee · 2016年10月25日

sweetea · 2018年10月09日