canvas星星炫耀

竹焮
竹焮 发布于 2017-01-04 15:17:08 浏览:2269 类型:转载 - 随笔 分类:JavaScript - canvas 二维码: 转载说明
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
			  width: 100%;
			  margin: 0;
			  overflow: hidden;
			}
			canvas{
			  display:block;
			}
		</style>
	</head>
	<body>
		<canvas id='canv'></canvas>
		<script>
			var c = document.getElementById('canv');//获取canvas的Id
			var $ = c.getContext('2d');/*设置绘制方式*/
			var u = 0;
			
			var go = function() {
			  var sc, g, g1, i, j, p, x, y, z, w, a, cur,
			    d = new Date() / 1000,
			    rnd = shift(),
			    rnd1 = d,
			    rnd2 = 2.4,
			    rnd3 = d * 0.2,
			    rnd1c = Math.cos(rnd1),
			    rnd1s = Math.sin(rnd1),
			    rnd2c = Math.cos(rnd2),
			    rnd2s = Math.sin(rnd2);
			  c.width = window.innerWidth;
			  c.height = window.innerHeight;
			  sc = Math.max(c.width, c.height);
			  $.translate(c.width * 0.5, c.height * 0.5);//从中心开始绘制
			  $.scale(sc, sc);//放大最大数值
			  /*线性渐变*/
			  g = $.createLinearGradient(-1, -2, 1, 2);
			  g.addColorStop(0.0, 'hsla(338, 95%, 25%, 1)');
			  g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
			  g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
			  $.fillStyle = g;//颜色
			  $.fillRect(-0.5, -0.5, 1, 1);
			  $.globalCompositeOperation = 'lighter';
			  $.rotate(rnd3 % Math.PI * 2);/*旋转*/
			  for (i = 0; i < 300; i += 1) {
			    p = rnd();
			    x = (p & 0xff) / 128 - 1;
			    y = (p >>> 8 & 0xff) / 128 - 1;
			    z = (p >>> 16 & 0xff) / 128 - 1;
			    w = (p >>> 24 & 0xff) / 256;
			    z += d * 0.5;
			    z = (z + 1) % 2 - 1;
			    a = (z + 1) * 0.5;
			    if (a < 0.9) {
			      $.globalAlpha = a / 0.7;
			    }else {
			      a -= 0.9;
			      $.globalAlpha = 1 - a / 0.1;
			    }
			    cur = x * rnd1c + y * rnd1s;
			    y = x * rnd1s - y * rnd1c;
			    x = cur;
			    cur = y * rnd2c + z * rnd2s;
			    z = y * rnd2s - z * rnd2c;
			    y = cur;
			    z -= 0.65;
			    if (z >= 0) {
			      continue;
			    }
			    sc = 0.1 / z;
			    x *= sc;
			    y *= sc;
			    $.save();
			    g1 = $.createRadialGradient(1, 1, 2, 1, 1, 1);
			    g1.addColorStop(0.0, 'hsla('+i+', 70%, 40%,.8)');
			    g1.addColorStop(0.5, 'hsla('+i+', 75%, 50%, 1)');
			    g1.addColorStop(1.0, 'hsla('+i+', 80%, 60%, .8)');
			    $.fillStyle = g1;
			    $.translate(x, y);
			    $.scale(sc * 0.017, sc * 0.017);
			    $.beginPath();
			    $.moveTo(2, 0);
			    for (j = 0; j < 10; j += 1) {
			      $.rotate(Math.PI*2 * 0.1);
			      $.lineTo(j % 2 + 1, 0);
			    }
			    $.arc(10, 10, 1, 0, Math.PI * 2);    
			    $.rotate(Math.PI * 2 * 0.1);
			    $.closePath();
			    $.fill();
			    $.restore();
			  }
			};
			/*
			Marsaglia's Xorshift128 PRG: http://en.wikipedia.org/wiki/Xorshift
			*/
			var shift = function(x, y, z, w) {
			  x = x || 123456789;
			  y = y || 362436069;
			  z = z || 521288629;
			  w = w || 88675123;
			
			  return function() {
			    var s = x ^ (x << 11);
			    x = y;
			    y = z;
			    z = w;
			    w = (w ^ (w >>> 19)) ^ (s ^ (s >>> 8));
			    return w;
			  };
			}
			window.addEventListener('resize', function() {
			  c.width = window.innerWidth;
			  c.height = window.innerHeight;
			}, false);
			window.requestAnimationFrame = window.requestAnimationFrame||
			window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
			window.msRequestAnimationFrame;
			var run = function() {
			  window.requestAnimationFrame(run);
			  go();
			}
			run();
		</script>
	</body>
</html>
z
给个赞 66 人点赞
收藏 86 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
brucelyy
brucelyy2017-01-04 17:03:153F
感觉钻眼睛里去了emoticon
举报 支持 (1) 回复 (0)
最新评论
luomg1995
luomg19952017-02-07 14:33:4813F
好厉害,http://www.qdfuns.com/notes/37388/8a6f28a87e68096acc775e3a5f35e32c.html //@四月鸟凉emoticonhttp://codepen.io/tmrDevelops/pen/mRdXKO
举报 支持 (0) 回复 (0)
luomg1995
luomg19952017-02-07 12:12:5112F
好炫
举报 支持 (0) 回复 (0)
965174016
9651740162017-01-13 11:52:5411F
楼主可以加上注释吗,看不懂,需要多年的经验和功力才可以做出来呀!
举报 支持 (0) 回复 (0)
a952543073
a9525430732017-01-09 09:57:0610F
经费在燃烧!!!!
举报 支持 (0) 回复 (0)
新叶给力
新叶给力2017-01-06 16:14:319F
啧啧啧,这特效,逆天
举报 支持 (0) 回复 (0)
兴兴杨
兴兴杨2017-01-06 14:46:008F
太帅了
举报 支持 (0) 回复 (0)
452215551
4522155512017-01-06 11:31:037F
厉害了我的哥
举报 支持 (0) 回复 (0)
ddvbbk
ddvbbk2017-01-05 12:59:186F
只有想不到的,没有做不到的
举报 支持 (0) 回复 (0)
ddvbbk
ddvbbk2017-01-05 12:57:575F
奥观海头像 //@yinglsc:666
举报 支持 (0) 回复 (0)
yinglsc
yinglsc2017-01-05 10:32:314F
666
举报 支持 (0) 回复 (1)
brucelyy
brucelyy2017-01-04 17:03:153F
感觉钻眼睛里去了emoticon
举报 支持 (1) 回复 (0)
四月鸟凉
四月鸟凉2017-01-04 16:34:002F
emoticonhttp://codepen.io/tmrDevelops/pen/mRdXKO
举报 支持 (0) 回复 (1)
大神M
大神M2017-01-04 16:29:071F
漂亮!
举报 支持 (0) 回复 (0)
竹焮 竹焮 作者

随处可学到东西!

作者最新