专栏首页技术经验分享分享HTML5-CANVAS相交线动画代码实例

分享HTML5-CANVAS相交线动画代码实例

今天全百科网分享的是HTML5-CANVAS相交线动画代码实例,史基于html、css、js三个方面制作而成,可用于网页背景,效果很是不错。

代码演示

http://img.yfi6.com/20190716/HTML5CANVAS.html

html

<body>以下代码</body>

<canvas id="canvas"></canvas>

css

<style>以下代码</style>

body {
  background-color: #eee;
  overflow: hidden;
}
canvas {
  background-color: #eee;
  display: block;
  margin: 0 auto;
}

js

<script>以下代码</script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
  cx = cw / 2;
var ch = canvas.height = window.innerHeight,
  cy = ch / 2;

ctx.fillStyle = "#000";
var linesNum = 16;
var linesRy = [];
var requestId = null;

function Line(flag) {
  this.flag = flag;
  this.a = {};
  this.b = {};
  if (flag == "v") {
    this.a.y = 0;
    this.b.y = ch;
    this.a.x = randomIntFromInterval(0, ch);
    this.b.x = randomIntFromInterval(0, ch);
  } else if (flag == "h") {
    this.a.x = 0;
    this.b.x = cw;
    this.a.y = randomIntFromInterval(0, cw);
    this.b.y = randomIntFromInterval(0, cw);
  }
  this.va = randomIntFromInterval(25, 100) / 100;
  this.vb = randomIntFromInterval(25, 100) / 100;

  this.draw = function() {
    ctx.strokeStyle = "#ccc";
    ctx.beginPath();
    ctx.moveTo(this.a.x, this.a.y);
    ctx.lineTo(this.b.x, this.b.y);
    ctx.stroke();
  }

  this.update = function() {
    if (this.flag == "v") {
      this.a.x += this.va;
      this.b.x += this.vb;
    } else if (flag == "h") {
      this.a.y += this.va;
      this.b.y += this.vb;
    }

    this.edges();
  }

  this.edges = function() {
    if (this.flag == "v") {
      if (this.a.x < 0 || this.a.x > cw) {
        this.va *= -1;
      }
      if (this.b.x < 0 || this.b.x > cw) {
        this.vb *= -1;
      }
    } else if (flag == "h") {
      if (this.a.y < 0 || this.a.y > ch) {
        this.va *= -1;
      }
      if (this.b.y < 0 || this.b.y > ch) {
        this.vb *= -1;
      }
    }
  }

}

for (var i = 0; i < linesNum; i++) {
  var flag = i % 2 == 0 ? "h" : "v";
  var l = new Line(flag);
  linesRy.push(l);
}

function Draw() {
  requestId = window.requestAnimationFrame(Draw);
  ctx.clearRect(0, 0, cw, ch);

  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    l.draw();
    l.update();
  }
  for (var i = 0; i < linesRy.length; i++) {
    var l = linesRy[i];
    for (var j = i + 1; j < linesRy.length; j++) {
      var l1 = linesRy[j]
      Intersect2lines(l, l1);
    }
  }
}

function Init() {
  linesRy.length = 0;
  for (var i = 0; i < linesNum; i++) { var flag = i % 2 == 0 ? "h" : "v"; var l = new Line(flag); linesRy.push(l); } if (requestId) { window.cancelAnimationFrame(requestId); requestId = null; } cw = canvas.width = window.innerWidth, cx = cw / 2; ch = canvas.height = window.innerHeight, cy = ch / 2; Draw(); }; setTimeout(function() { Init(); addEventListener('resize', Init, false); }, 15); function Intersect2lines(l1, l2) { var p1 = l1.a, p2 = l1.b, p3 = l2.a, p4 = l2.b; var denominator = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y); var ua = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / denominator; var ub = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / denominator; var x = p1.x + ua * (p2.x - p1.x); var y = p1.y + ua * (p2.y - p1.y); if (ua > 0 && ub > 0) {
    markPoint({
      x: x,
      y: y
    })
  }
}

function markPoint(p) {
  ctx.beginPath();
  ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI);
  ctx.fill();
}

function randomIntFromInterval(mn, mx) {
  return ~~(Math.random() * (mx - mn + 1) + mn);
}

原文链接:http://www.quanbaike.com/news/3025.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享个人开发的微信公众号吸粉引流的恶搞小游戏

    一个超级简单有效的恶搞小游戏,是一个用于微信公众号吸粉引流的工具,查了网上也有很多引流方法,抽签、算命、健康测试之类的太多了。今天和大家分享的是通过恶搞加群类型...

    于飞云计算
  • 纯代码实现手机Q打开网址跳转系统浏览器

    经全百科测试,只有访问cn或者com或者net域名时才能正常的跳转。这个代码适用于很多方面,例如使被QQ管家拦截的域名在手机QQ内通过跳转能够得到正常的访问。

    于飞云计算
  • WordPress后台文章编辑器添加下拉式短代码选择

    今天全百科网给大家分享的是WordPress后台文章编辑器如何添加下拉式短代码选择样式。

    于飞云计算
  • 寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

    上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

    望月从良
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study
  • 移动端 局部dom实现滚动

    https://github.com/surmon-china/vue-awesome-swiper/issues/423

    念念不忘
  • VUE+WebPack游戏设计:欲望都市城市图层的设计

    望月从良
  • 社区开源框架网络模块:ConnectionManager详解

    地址:https://github.com/Golangltd/LollipopCreator

    李海彬
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • vue 中使用threejs

    tianyawhl

扫码关注云+社区

领取腾讯云代金券