html5 canvas正弦波动动画特效



124 492 165



特效描述:html5 canvas 正弦波动动画特效,html5 canvas基于css3设置正弦波数值,弧形波动动画特效。

代码结构

1. HTML代码

<section class="controls">
    <div class="control">
      <label for="amplitude">Amplitude</label>
      <input id="amplitude" type="range" min="10" max="200" value="30">
    </div>
    <div class="control">
      <label for="wavelength">Wave length</label>
      <input id="wavelength" type="range" min="3" max="500" value="150">
    </div>
    <div class="control">
      <label for="frequency">Frequency</label>
      <input id="frequency" type="range" min="1" max="30" value="10">
    </div>
  </section>
  <canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var amplitudeRange = document.getElementById('amplitude');
var waveLegthRange = document.getElementById('wavelength');
var frequencyRange = document.getElementById('frequency');
var posX = 0;
var posY = 0;
var diffX = 0;
updateCanvas();
var amplitude = Number(amplitudeRange.value);
var frames = 0;
var frequency = Number(frequencyRange.value);
var wavelength = Number(waveLegthRange.value);
amplitudeRange.addEventListener('change', function (evt) {
  amplitude = Number(evt.currentTarget.value);
});
waveLegthRange.addEventListener('change', function (evt) {
  wavelength = Number(evt.currentTarget.value);
});
frequencyRange.addEventListener('change', function (evt) {
  frequency = Number(evt.currentTarget.value);
});
animate();
window.addEventListener('resize', onResize);
function updateCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight / 2;
  diffX = canvas.width / 2.5;
  posX = canvas.width * .5;
  posY = canvas.height * .5;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#f1ff22';
  ctx.lineWidth = 1;
  ctx.moveTo(posX, posY);
}
function drawCircle(x, y, ctx) {
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
  ctx.fillStyle = ctx.strokeStyle;
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.stroke();
}
function calcPosY(x) {
  return Math.sin((x / wavelength * (Math.PI * 2)) + frames / frequency) * amplitude;
}
function animate() {
  frames++
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 1;
  for (var x = posX - diffX; x < canvas.width / 2 + diffX; x++) {
    var y = calcPosY(x);
    ctx.lineTo(x, y + posY);
  }
  ctx.stroke();
  for (var cx = posX - diffX; cx < canvas.width / 2 + diffX; cx += 15) {
    var y1 = calcPosY(cx);
    drawCircle(cx, y1 + posY - 40, ctx);
  }
  requestAnimationFrame(animate.bind(this));
}
function onResize() {
  updateCanvas();
}</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 拖动 拖拽 拖动插件 拖拽插件 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 图片拖动 图片拖拽 h5线条动画 html5线条动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到