前端特效19:使用js生成的多彩旋转魔力画笔

今天,小编将与大家分享web前端特效荟萃系列第十九期,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~





第19期,给大家分享一个使用js生成的多彩旋转魔力画笔效果,相关代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cloth</title>
  <style>
    canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}
   
  </style>
</head>

  
<body>
  <canvas></canvas>
  <script>
    var ctx = document.querySelector("canvas").getContext("2d");

function resize(canvas) {
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;
  if (width != canvas.width || height != canvas.height) {
    canvas.width = width;
    canvas.height = height;
  }
}

function render(time) {
  time *= 0.001;
  resize(ctx.canvas);
  ctx.save();
  var w = ctx.canvas.width;
  var h = ctx.canvas.height;
  var hw = w / 2;
  var hh = h / 2;
  ctx.clearRect(0, 0, w, h);
  ctx.strokeStyle = "red";
  var grd = ctx.createLinearGradient(-400, 0, 400, 0);
  grd.addColorStop(0, "#FF4843");
  grd.addColorStop(0.2, "#FFBF43");
  grd.addColorStop(0.4, "#FBFF93");
  grd.addColorStop(0.6, "#79C975");
  grd.addColorStop(.8, "#328BDC");
  grd.addColorStop(1, "#6A3072");
  ctx.fillStyle = grd;
  ctx.translate(hw, hh);
  ctx.rotate(time * 0.1);
  for (var ii = 0; ii < 200; ++ii) {
    ctx.rotate(Math.sin(time * 0.3) * 0.5);
    ctx.fillRect(-hw, -hh, w, h);

    ctx.scale(0.9, 0.9);
  }
  ctx.restore();

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

  </script>
</body>
</html>


在线演示:Here~ 



今天的分享就是这些啦,这里是igeekbar,希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些炫酷的前端特效,赶快留言分享给我们呦~~~


Geek豪哥   iGeekBar社区大管家

iGeekBar创始人之一,热爱科技与设计,正在探索研究数据科学的女猿,最爱勾搭极客帅哥美女的逗比疯姑娘~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~