Skip to main content
 首页 » 网站建设

如何用在HTML5 用Canvas为网页添加动态波浪背景

2个月前 (10-05)3982百度未收录

最近很喜欢简洁的主题,看到一个网页是用波浪为背景效果。但是并不是传统的视频背景,后来查看原来是Canvas动态波浪效果。很好看,所以扒下来了。

如何用在HTML5 用Canvas为网页添加动态波浪背景-新哈博客

js代码

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout  window.requestAnimFrame = (function() {  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||  function(callback) {    window.setTimeout(callback, 1000 / 60);
  };
})();//初始角度为0  var step = 0;//定义三条不同波浪的颜色  var lines = ["rgba(235,0,90, 0.3)", "rgba(235,0,90, 0.6)", "rgba(235,0,90, 0.9)"];function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  step++;  //画3个不同颜色的矩形  
  for (var j = lines.length - 1; j >= 0; j--) {
    ctx.fillStyle = lines[j];    //每个矩形的角度都不同 
    var angle = (step + j * 15) * Math.PI / 180;    var deltaHeight = Math.sin(angle) * 50;    var deltaHeightRight = Math.cos(angle) * 50;
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2 + deltaHeight);
    ctx.bezierCurveTo(canvas.width / 2, canvas.height / 2 + deltaHeight - 50, canvas.width / 2, canvas.height / 2 + deltaHeightRight - 50, canvas.width, canvas.height / 2 + deltaHeightRight);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, canvas.height / 2 + deltaHeight);
    ctx.closePath();
    ctx.fill();
  }
  requestAnimFrame(loop);
}
loop();

html代码

<section class="doc">
  <canvas id="canvas">
  </canvas></section>

css代码

body {  background - color: #f9f9f9;
}.doc {  position: relative;  margin: 0 auto;  width: 500px;  height: 300px;
}#canvas {  position: absolute;  top: 0px;
  z - index: 1;  height: auto;
}


评论列表2条评论
懒人
懒人回复 换域名啦。我说看第一篇文章好眼熟
苏黎
苏黎回复 不错,原来的域名被中国长城防火墙拦截了
发表评论