仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条，很丝滑！

先看一下最终效果

    

 

正弦曲线

正弦曲线公式  y = A sin(Bx + C) + D
         

   振幅是 A，A 值越大，曲线更陡峭
   B值越大 周期越短
   C水平位移
   垂直位移是 D，控制曲线上下移动

实现思路

首先来绘制曲线

  1.定义构造函数和初始化方法

//sin曲线构造函数
 function drawSin(option){
	this.init(option);
 }
 //初始化
 drawSin.prototype.init=function(o){
 	this.A=6;//振幅
 	this.B=0.02;//周期
 	this.C=0;//水平位移
 	this.D=H/2;//垂直位移
 	this.color='orange';//填充颜色
 	this.speed=-0.2; //移动速度
 	this.percent=0;//百分比
 	this.offsetX=0;//开始X坐标
 	
 	for(var key in o){//循环new时候传入的参数，如果存在，则覆盖，没有传则使用默认
 		if(typeof this[key] !=='undefined'){
 		   this[key] = o[key];
 		}
 	}
 }

2.添加一个render绘制函数

 //绘制曲线
 drawSin.prototype.render=function(c){
 	c.save();
 	c.beginPath();
 	var y=0;
 	for(var x=this.offsetX;x

3.生成一根正弦曲线

 var sin1 = new drawSin({
 	A:20,B:0.025,
 	C:0,D:H/2-6,
 	color:'#3399FF'
 }).render(ctx);

4.看一下现在的效果

5.加上流动代码

  drawSin.prototype.update=function(){
 	this.C+=this.speed;//设定横向移动递增
  }

  function move(){
 	//执行动画帧
 	window.requestAnimationFrame(move);
 	//清理画布
 	ctx.clearRect(0,0,W,H);
 	//更新 
 	sin1.update();
 	//绘制
 	sin1.render(ctx);
 }
 window.requestAnimationFrame(move);

6.加上颜色

裁剪成圆形

 draw();
  function draw(){//画圆
  	ctx.strokeStyle='rgb(250,235,215)';
	ctx.lineWidth=10;
	ctx.beginPath();
	ctx.arc(W/2,H/2,160,0,Math.PI*2,true);
	ctx.stroke();
	ctx.clip();
  }

效果如下

加上百分比

 //显示的百分比
 function text(val){
 	if(inputClick)return ;
 	percent.children[1].innerText=val;
	percent.children[0].value=val;
 }

 function doClick(e){
		var p=percent.children[1],input=percent.children[0];
		var e=e||window.event;
		var target=e.currentTarget;
			e.stopPropagation();//阻止冒泡
		if(target.tagName&&target.tagName.toUpperCase()==='DIV'){
			if(input.style.display==''){
				return;
			}
			//显示input
			input.style.display='';
			p.style.display='none';
			input.value=p.innerText;
			input.focus();
			inputClick=true;
		}else{
			if(input.style.display==''){
				p.style.display='';
				//隐藏input
				input.style.display='none';
				p.innerText=input.value;
				 //处理百分比
				editPercent();
			}
		}
	}
	function editPercent(){
		var p=percent.children[1],input=percent.children[0];
		//执行动画
		sin1.change=parseInt(p.innerText);
		sin2.change=parseInt(p.innerText);
	}
	//控制文本输入
	function doInput(obj){
		obj.value=obj.value.replace(/[^\d]/g,'');
		if(obj.value=='')obj.value=0;
		var value = parseInt(obj.value);
		if(value>100){
			obj.value=100;
		}else if(value<=0){
			obj.value=0;
		}
	}
	//百分比点击事件
	percent.addEventListener('click',doClick);
	document.addEventListener('click',doClick);
	
	

看下效果

 加多一条曲线、百分比可以编辑就完成了

 

换其他图形试试

1.三角形

2.长方形

3.心形

 

全部代码：

给个三连吧大佬们，谢谢！