当前位置:首页 » 网站建设 » 正文

分类页和文章页“当前位置”下方广告(PC版)
分类页和文章页“当前位置”下方广告(移动版)

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

973 人参与  2016年10月05日 21:19  分类 : 网站建设  评论

最近很喜欢简洁的主题,看到一个网页是用波浪为背景效果。但是并不是传统的视频背景,后来查看原来是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;
}


来源:小小蚂蚁博客(微信/QQ号:604980661),转载请保留出处和链接!

本文链接:http://www.xinha.net/post/363.html

文章底部广告(PC版)
文章底部广告(移动版)
百度分享获取地址:http://share.baidu.com/

本文标签:Canvas  动态  代码  

微信公众号:QQ604980661 关注1元购买iPhone6!

加入【网络营销联盟】QQ群:72599821(加群验证:小小蚂蚁博客)

这里的内容可以随意更改,在后台-主题配置中设置。

百度推荐获取地址:http://tuijian.baidu.com/,百度推荐可能会有一些未知的问题,使用中有任何问题请直接联系百度官方客服!
<< 上一篇 下一篇 >>
评论框上方广告(PC版)
评论框上方广告(移动版)

  • 评论(2)
  • 相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
  • 1楼 懒人 2016-10-06 00:08:13 回复
    换域名啦。我说看第一篇文章好眼熟
  • New 苏黎 2016-10-07 16:55:33 回复
    不错,原来的域名被中国长城防火墙拦截了

我是标题

    内容的形式各种各样,可以是文本,也可以是各种广告等。

网络推广 | 网络营销 | 本站主题 | 网络创业 | 电子商务