html效果教程,【HTML5】有趣的海浪效果教程

  1、创建触发条件(按钮)
 
  =”Beisizer()”//点击时触发JS事件
 
  οnmοuseοver=”bcd()”//鼠标经过时JS事件
 
  οnmοuseleave=”out()”//鼠标离开时JS事件
 
  id=”Anniu”>确&nbsp?&nbsp&nbsp&nbsp&nbsp&nbsp?&nbsp&nbsp&nbsp&nbsp定
 
  2、创建画布Canvas
 
  3、创建JS事件(属性设置)//获取画布
 
  var?beisizer?=?document.getElementById(”Theback”);?var?ContenofBeisizer?=?beisizer.getContext(”2d”);?//设置波浪海域(海浪宽度,高度)
 
  var?beisizerwidth?=?beisizer.width;?var?beisizerheight?=?beisizer.height;?var?beisizerlinewidth?=?2;//曲线
 
  var?sinX?=?0;?var?sinY?=?beisizerheight/2.0;//轴长
 
  var?axisLenght?=?beisizerwidth;//弧度宽度
 
  var?waveWidth?=?0.014;//海浪高度
 
  var?waveHeight?=?beisizerheight?/?15.0;
 
  ContenofBeisizer.lineWidth?=?beisizerlinewidth;
 
  4、画贝塞尔曲线var?drawSin?=?function?(xofspeed)?{
 
  ContenofBeisizer.save();//存放贝塞尔曲线的各个点
 
  var?points?=?[];
 
  ContenofBeisizer.beginPath();//创建贝塞尔点
 
  for?(var?x?=?sinX;x?
 
  var?y?=?-Math.sin((sinX+x)*waveWidth+xofspeed);//?points.push([x,sinY?+?y?*?waveHeight]);?测试请解开注释,注释下一行
 
  points.push([x,rand+y*waveHeight]);
 
  //ContenofBeisizer.lineTo(x,sinY?+?y?*?waveHeight);测试请解开注释,注释下一行
 
  ContenofBeisizer.lineTo(x,rand?+?y?*?waveHeight);
 
  }
 
  ContenofBeisizer.lineTo(axisLenght,beisizerheight);
 
  ContenofBeisizer.lineTo(sinX,beisizerheight);
 
  ContenofBeisizer.lineTo(points[0][0],points[0][1]);
 
  ContenofBeisizer.stroke();
 
  ContenofBeisizer.restore();?//贝塞尔曲线样式设置
 
  ContenofBeisizer.strokeStyle?=?”#3bc777″;
 
  ContenofBeisizer.fillStyle?=?”#3bc777″;
 
  ContenofBeisizer.fill();
 
  };这一段代码已经完成静态贝赛尔曲线的绘制了,可以通过解开以下语句尝试运行看下效果。
 
  var y = -Math.sin((sinX+x)*waveWidth);
 
  points.push([x,rand+y*waveHeight]);
 
  var y = -Math.sin((sinX+x)*waveWidth+xofspeed);
 
  运行方法执行 drawSin()
 
  静态贝塞尔曲线。png
 
  5、海浪效果的实现
 
  需要在属性中加入一下代码进行速率的设置
 
  var speed = 0.1; 数值越大速率越快
 
  var xofspeed = 0; ?波浪横向的偏移量
 
  var rand = beisizerheight;波浪高度var?rendY?=?function?()?{
 
  ContenofBeisizer.clearRect(0,0,beisizerwidth,beisizerheight);//控制海浪高度
 
  var?tmp?=?0.1;
 
  rand-=tmp;var?b?=?beisizerheight?-?rand;
 
  //控制循环涨潮
 
  if?(parseInt(b)==beisizerheight){
 
  rand?=?beisizerheight;
 
  }
 
  drawSin(xofspeed);
 
  drawSinl(xofspeed);
 
  xofspeed?+=?speed;
 
  requestAnimationFrame(rendY);
 
  };通过调用自身产生不同的高度,来产生海浪效果。这里设置的属性值配合第四步画贝塞尔曲线一起进行理解。
 
  运行方式 rendY();
 
  总结
 
  贝赛尔曲线也可以制作音波,心跳仪等。可以尝试改变频率值来实现。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64012.shtml

张贴在3