Canvas線潭訓環-有解無憂

? 可喜可賀！慶祝電腦起死回生，慶祝一天好過一天，深夜給電腦安裝了開發插件，第二天莫名死機，問了好多人都說主板壞掉了，需要重裝系統，我先是對著賓夕法尼亞大學的方向拜了拜，又是一番操作，終于喚醒了老伙計度假的心，
? 寫一個Canvas 影片送給你們，十五的月亮十六圓，多給家人一些陪伴，

在這里插入圖片描述

? 今晚我會出一期Canvas 影片詳細教程，如果你欣賞我的影片，可以添加收藏，請查看我的置頂文章，我將不勝感激，
請看原始碼：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Canvas 網狀花環</title>
<style>
html, body {
  margin: 0;
  overflow: hidden;
}
</style>
</head>
<body>
	<canvas id="canvas" width="100%" height="100%">
</body>
<script>
	var canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");
	var mouseX = 0;
	var mouseY = 0;
	var a = 0.2;
	var t = 0;
	var aStep = Math.PI * 0.01;
	var globalHue = 0;
	init();
	function init() {
	  canvas.width = window.innerWidth;
	  canvas.height = window.innerHeight;
	  window.addEventListener("mousemove", e => {
	    mouseX = e.clientX;
	    mouseY = e.clientY;
	  });
	  update();
	}

	function update() {
	  requestAnimationFrame(update);
	  var time = performance.now() / 60;

	  // do stuff here
	  a = Math.sin(2 - time * 0.0001);
	  t = Math.sin(2 + time * 0.03);
	  //aStep = (Math.sin(time * 0.01) + 1.5) * 0.25
	  aStep = Math.PI * (0.375 + Math.sin(time * 0.001) * 0.125);

	  globalHue += 10;

	  draw();
	}

	function draw() {
	  // clear canvas
	  ctx.fillStyle = "#000000";
	  ctx.fillRect(0, 0, canvas.width, canvas.height);

	  // line
	  var cx = window.innerWidth / 2;
	  var cy = window.innerHeight / 2;
	  var x, y, px, py;
	  var radius = 0,pradius = 0;
	  var totalAngle = Math.PI * 200;
	  for (var theta = 0; theta < totalAngle; theta += aStep) {
	    pradius = radius;
	    radius = (t + Math.pow(2, Math.cos(theta * a))) * 200;
	    px = x;
	    py = y;
	    x = cx + Math.cos(theta) * radius;
	    y = cy + Math.sin(theta) * radius;

	    if (theta > 0) {
	      ctx.beginPath();
	      ctx.moveTo(x, y);
	      ctx.lineTo(px, py);

	      var dx = x - px;
	      var dy = y - py;
	      var lineSize = Math.sqrt(dx * dx + dy * dy);

	      var r = pradius + (radius - pradius) / 2;

	      var hue = globalHue + theta / Math.PI * 180;
	      ctx.strokeStyle = "hsl(" + hue + ", 100%, 50%)";
	      //ctx.lineWidth=clamp(map(r, -200, 200, 0.25, 2), 0.25, 10);
	      ctx.lineWidth = .5;
	      ctx.stroke();
	      ctx.closePath();
	    }
	  }
	}
	function map(value, start1, stop1, start2, stop2) {
	  return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
	}
	function clamp(value, min, max) {
	  return value < min ? min : value > max ? max : value;
	}
</script>
</html>

? 無論是Canvas 還是別的，前端的學習總是妙趣橫生，只要思想在不斷進步，技術就會一次次的突破，如果你學習過Canvas ，你會更加了解這段代碼的神奇，送給你，遠道而來的求學者，

推薦閱讀：
線條影片
怦然心動
阿波羅的輕語
游動的花花腸子
V3.14激流勇進

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/155464.html

標籤：其他

上一篇：JavaScript - 正則(RegExp)判斷文本框中是否包含特殊符號

下一篇：卑微小白在線求助