<!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. bzoj 1711 [Usaco2007 Open]Dining吃饭&&poj 3281 Dining

    最大流. 这东西好像叫三分图匹配. 源点向每个食物点连一条容量为1的边. 每个饮料点向汇点连一条容量为1的边. 将每个牛点拆点,食物点向喜欢它的牛的入点连一条容量为1的边,牛的出点向它喜欢的饮料点连一 ...

  2. 推荐一款Mac上好用的Markdown编辑器

    [TOC] 推荐一款Mac上好用的Markdown编辑器 正文 我算是一位Evernote的重度用户吧.之前也尝试过为知笔记,有道云笔记,微软的onenote,最后还是觉的Evernote.因为我喜欢 ...

  3. writing

    1.作文类型和结构2.作文的四个评分标准3.作文的常用句型4.作文的逻辑观点 大作文分为几类:1.A类(Argument): 这类作文实际上是比较常见的,比如:Caring for children ...

  4. sql语句,order by

    ORDER BY子句必须出现在SELECT中的最后一个子句. 在排序的列中NULL值被认为是最大的. 在SQL语句中给表达式定义别名是一个好习惯. 多列排序时不管升序还是降序,每个列需要单独设置

  5. python3--删除所有空目录，第一个有实际用处的程序

    #目标:删除所有空文件夹 #逐个判断某目录下所有项目 #若该项目是目录就进入该目录,完成上一步,不是下一个项目 #判断完所有后判断当前目录是否是空目录,是就删除 #需要管理员权限,否则很多目录无权限 ...

  6. 12月18日Smarty文件缓存

    缓存 做缓存的目的是为了让程序运行起来更加迅速.因为如果程序访问数据库时数据量较大,执行起来会比较慢.而且每一次刷新页面都会访问依稀数据库,然后再把数据显示在页面上. 设置缓存也有一个缺点,那就是缓存 ...

  7. 移动端自适应：flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

  8. C语言创建及解析Json的使用法则

    参考原文:http://blog.csdn.net/xukai871105/article/details/33013455 JSON(JavaScriptObject Notation)是一种轻量级 ...

  9. Entity framewok 如何实现多条记录作为一条取出, for xml path如何实现

    http://www.myexception.cn/linq/1288046.html Entity framewok 怎么实现多条记录作为一条取出, for xml path怎么实现News表:ID ...

  10. 记录yii2-imagine几个常用方法

    记录yii2-imagine几个常用方法: //压缩 Image::thumbnail('@webroot/img/test-image.jpg', 120, 120)->save(Yii::g ...