<!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>

　　无论你是学生，还是工作，也或者你正在努力找工作，想要在web前端知识领域有所涉入和提高的，有官方平台提供给你互相交流和学习!更多小案例等你来下载，搜web前端学习部落22群加入。。。

canvas星星炫耀的更多相关文章

  1. canvas 星星闪烁的效果

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. canvas流星月亮星星银河

    这是页面的特效,首先月亮直接出现,然后星星和银河渐渐的出现(一闪一闪),最后流星划过,留下完美的句点. 所有的动画都是通过帧来实现的. 星星的代码分为2部分,首先是随机生成星星,然后是绘制星星,最后是 ...

  3. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  4. 星星闪烁+多边形移动 canvas

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. canvas绘制星星和月亮

    用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...

  6. 给页面添加Canvas鼠标光标星星跟随动画特效

    素材来源:https://www.lanrenzhijia.com/others/5024.html 简单说下我自己的步骤: 把<script type="text/javascrip ...

  7. html5 js canvas中画星星的函数

    function drawStar(cxt, x, y, outerR, innerR, rot) { cxt.beginPath(); ; i < ; i++) { cxt.lineTo(Ma ...

  8. 伙伴们休息啦canvas绘图夜空小屋

    HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: &l ...

  9. 有关于canvas几个新知识点

    对于canvas的初学者来说,以下几点应该是不知道的知识点: 1.canvas有兼容IE6/7/8的脚本文件 下载地址:https://github.com/arv/explorercanvas 2. ...

随机推荐

  1. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  2. BZOJ 2716: [Violet 3]天使玩偶

    2716: [Violet 3]天使玩偶 Time Limit: 80 Sec  Memory Limit: 128 MBSubmit: 1473  Solved: 621[Submit][Statu ...

  3. ReactNative 分享解决listView的一个郁闷BUG

    用ListView的时候,会出现一个非常傻bi的情况,就是render的时候,listView不显示,需要碰/滑一下才会显示. 一开始我在怀疑自己是不是布局哪里有冲突,改到哭都没发现布局有什么问题,直 ...

  4. 关于Java中的继承和组合的一个错误使用的例子

    [TOC] 关于Java中的继承和组合的一个错误使用的例子 相信绝大多数人都比较熟悉Java中的「继承」和「组合」这两个东西,本篇文章就主要就这两个话题谈论一下.如果我某些地方写的不对,或者比较幼稚, ...

  5. vm.max_map_count

    Virtual memoryedit Elasticsearch uses a hybrid mmapfs / niofs directory by default to store its indi ...

  6. sed awk 样例

    sed [options] '[action]' filename options: -n:一般sed命令会把所有数据都输出到屏幕,如果加入此选项,则只会把经过sed命令处理的行输出到屏幕. -e:允 ...

  7. 3MyBatis配置--深入浅出MyBatis技术原理与实践(笔记)

    XML 映射配置文件 configuration 配置 properties 属性 settings 设置 typeAliases 类型命名 typeHandlers 类型处理器 objectFact ...

  8. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  9. KMP专题

    1.[HDU 3336]Count the string(KMP+dp) 题意:求给定字符串含前缀的数量,如输入字符串abab,前缀是a.ab.aba.abab,在原字符串中出现的次数分别是2.2.1 ...

  10. 决策树-ID3

    id3:无法直接处理数值型数据,可以通过量化方法将数值型数据处理成标称型数据,但涉及太多特征划分,不建议 决策树:的最大优点在于可以给出数据的内在含义,数据形式非常容易理解: 决策树介绍:决策树分类器 ...