<!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. fedora22,fedora24最简单的安装virtaulbox的方法

    fedora为什么不好用呢? 1.因为很多软件没有预先安装,新手安装时,就无从下手了. 2.版本更新太快,有老手提供了解决方案,但是版本更新了,新手按照步骤来,就不能配置成功! 不抱怨了. 安装vir ...

  2. python3安装lxml（windows）

    爬虫时通常要安装LXML,对于通过一下命令行 1 pip install lxml 出现如下错误的解决方法 1 lxml Unable to find vcvarsall.bat 1. 安装wheel ...

  3. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  4. 12月8日phpcms添加子栏目后的读取

    一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 所以,当你这个栏目添 ...

  5. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  6. Nginx中root与alias的用法及区别:

    Nginx中root与alias都是定义location {}块中虚拟目录访问的文件位置: 先看看两者在用法上的区别: location /img/ { alias /var/www/image/; ...

  7. getchar fflush 的分析笔记

    问题描述: 统计从键盘输入的若干个字符中有效字符的个数,以换行符作为输入结束.有效字符是指第一个空格符前面的字符,若输入字符中没有空格符,则有效字符为除了换行符之外的所有字符. 示例代码: #incl ...

  8. SQL Server 2016 RC0 安装（超多图）

    微软最新版本的数据库SQL Server 2016在2016年3月9日推出了RC0版本.已经提供了包括简体中文等多种语言版本,不过联机丛书还是英文版的.对OS的要求是WIN8,WIN10, WIN20 ...

  9. 隐式的bean发现与自动装配机制

    使用beans.xml文件进行bean的创建和注入通常是可行的,但在便利性上Spring提供了更简单的方法--自动装配 接下来我们假设一个场景:我有若干播放器(MediaPlayer{CD播放器/MP ...

  10. IIS7.0发布Web服务-0001

    配置错误 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overrideModeDefault="Deny"),或者是通过包含 ove ...