<!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. Java多线程与并发库高级应用-面试题

    第一题:现有的程序代码模拟产生了16个日志对象,并且需要运行16秒才能打印完这些日志,请在程序中增加4个线程去调用parseLog()方法来分头打印这16个日志对象,程序只需要运行4秒即可打印完这些日 ...

  2. 【poj2154】 Color

    http://poj.org/problem?id=2154 (题目链接) 题意 n个珠子的项链,可以染上n中颜色,项链可以旋转不能翻转,求染色方案数. Solution 经典的公式: \begin{ ...

  3. python爬乌云dorps文章

    有时候翻看drops 无赖drops没有一个全部文章列表,所以就有了这个想法把所有文件标题链接都爬出来这样又直观又好找感兴趣的文章 #coding=utf-8 import re import url ...

  4. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  5. NOIp2016 游记

    DAY -2 不要问我为什么现在就开了一篇博客. 本来想起个NOIp2016爆零记或者NOIp2016退役记之类的,但是感觉现在不能乱立flag了.所以就叫游记算了. 前几场模拟赛崩了一场又一场,RP ...

  6. js 对象的_proto_

    js 对象呢,有个属性叫_proto_,以前没听说过,也没关注,最近看这个原型,就被迫知道了这个东西,js 这里面的东西,真是规定的很奇怪,具体为啥也不知道,就测试发现的,对象的_proto_属性,和 ...

  7. Net中对Object的定义

    如果你问一个.Net程序员什么是Object,他可能会信誓旦旦的告诉你"Object还不简单吗,就是所有类型的基类"这个答案是对的,但是不足以说明Object真正是什么 好在HTM ...

  8. web api7

  9. 解决Maven工程中报 Missing artifact jdk.tools:jdk.tools:

    jdk.tools:jdk.tools是与JDK一起分发的一个JAR文件,可以如下方式加入到Maven项目中:<dependency>    <groupId>jdk.tool ...

  10. JavaScript葵花宝典之闭包

    闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点,  虽然在工作中,项目里经常都会用到~  但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻 ...