Canvas放射线动画(分享)

认真你就输了丶
认真你就输了丶 发布于 2016-12-24 15:53:59 浏览:518 类型:原创 - 随笔 分类:JavaScript - canvas 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas放射线动画</title>
  <style>
    body{
      background:#000;
      overflow:hidden;
      margin:0;
      padding:0;
    }
    canvas{
      width:45%;
      margin:5% 30%;
    }
</style>
</head>
<body>
  <canvas id="canv" width="600" height="600"></canvas>

  <script type="text/javascript">
    var c;
    var $;
    var w = 600;
    var h = 600;
    constant = 15;
    var rad = 300;
    var timeout = 0;

      c = document.getElementById("canv");
      $ = c.getContext("2d");
      drawLines();

    function drawLines() {
      $.fillRect(0,0,w,h);
      $.translate(w/2,h/2);
      for (var i = 0; i < 25; i++) {
        for (var n = -45; n <= 45; n+=constant) {
          setTimeout("draw("+n+");",100 * timeout);
          timeout++;
        }
      }
    }
    function draw(n){
      $.beginPath();
      $.moveTo(0,rad);
      var radians = Math.PI/180*n;
      var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);
      $.lineTo(x,0);

      if (Math.abs(n) == 45) {
        $.strokeStyle=rndColor();
        $.lineWidth=2;
      } else if (n == 0) {
        $.strokeStyle="rgb(200,200,200)";
        $.lineWidth=.5;
      } else {
        $.strokeStyle="rgb(110,110,110)";
        $.lineWidth=.5;
      }
      $.stroke();
      $.rotate((Math.PI/180)*15);
    }

    function rndColor() {
        var r = 255*Math.random()|0,
            g = 255*Math.random()|0,
            b = 255*Math.random()|0;
        return 'rgb(' + r + ',' + g + ',' + b + ')';
}
  </script>
</body>
</html>
z
给个赞 3 人点赞
收藏 3 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新