html5 canvas正弦波動動畫特效



129 512 171



特效描述: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

加群請備注:從官網了解到

老夫子电子