<!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. String、StringBuffer与StringBuilder之间区别

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较:StringBuilder >  String ...

  2. Calendar类

    Calendar类 注意:根据日历规则,如果想要这个月减去5天,那么则为: add(Calendar.Day,-5) 成员方法: public int get(int field):返回给定日历段的值 ...

  3. Newtonsoft.Json高级用法

    http://blog.csdn.net/chengmodelong/article/details/46680143

  4. Java多线程 3 线程同步

    在之前,已经学习到了线程的创建和状态控制,但是每个线程之间几乎都没有什么太大的联系.可是有的时候,可能存在多个线程多同一个数据进行操作,这样,可能就会引用各种奇怪的问题.现在就来学习多线程对数据访问的 ...

  5. js 刷新页面window.location.reload();

    Javascript刷新页面的几种方法:1    history.go(0)2    window.location.reload() window.location.reload(true) 3   ...

  6. ZOJ3944 People Counting ZOJ3939 The Lucky Week （模拟）

    ZOJ3944 People Counting ZOJ3939 The Lucky Week 1.PeopleConting 题意:照片上有很多个人,用矩阵里的字符表示.一个人如下: .O. /|\ ...

  7. mfc+vtk

    MFC中view类主要处理显示视图,doc类处理文档,mainframe主要为整个窗口的和工程的设置管理.由此,VTK与MFC联合编程时,需要主要的是数据操作,以及显示要很好的与MFC中的结构结合,做 ...

  8. href="javascript:;" 作用

    <a href="javascript:;" onclick="doExport(this)" class="easyui-linkbutton ...

  9. Mysql字符转义

    在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' 单引号('''). \" 双 ...

  10. N皇后问题—初级回溯

    N皇后问题,最基础的回溯问题之一,题意简单N*N的正方形格子上放置N个皇后,任意两个皇后不能出现在同一条直线或者斜线上,求不同N对应的解. 提要:N>13时,数量庞大,初级回溯只能保证在N< ...