玫瑰花特效
<canvas id="c"></canvas>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=600;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)
</script>
带有渐变效果
动态粒子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet/less" href="../../page/plug_in/layui/css/layui.css" media="all">
<style>
html,body {
100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container{
100％;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
</head>
<body>
<div id="jsi-particle-container" class="container"></div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var RENDERER = {
PARTICLE_COUNT : 1000,
PARTICLE_RADIUS : 1,
MAX_ROTATION_ANGLE : Math.PI / 60,
TRANSLATION_COUNT : 500,
init : function(strategy){
this.setParameters(strategy);
this.createParticles();
this.setupFigure();
this.reconstructMethod();
this.bindEvent();
this.drawFigure();
},
setParameters : function(strategy){
this.$window = $(window);
this.$container = $('#jsi-particle-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container);
this.context = this.$canvas.get(0).getContext('2d');
this.center = {x : this.width / 2, y : this.height / 2};
this.rotationX = this.MAX_ROTATION_ANGLE;
this.rotationY = this.MAX_ROTATION_ANGLE;
this.strategyIndex = 0;
this.translationCount = 0;
this.theta = 0;
this.strategies = strategy.getStrategies();
this.particles = [];
},
createParticles : function(){
for(var i = 0; i < this.PARTICLE_COUNT; i ++){
this.particles.push(new PARTICLE(this.center));
}
},
reconstructMethod : function(){
this.setupFigure = this.setupFigure.bind(this);
this.drawFigure = this.drawFigure.bind(this);
this.changeAngle = this.changeAngle.bind(this);
},
bindEvent : function(){
this.$container.on('click', this.setupFigure);
this.$container.on('mousemove', this.changeAngle);
},
changeAngle : function(event){
var offset = this.$container.offset(),
x = event.clientX - offset.left + this.$window.scrollLeft(),
y = event.clientY - offset.top + this.$window.scrollTop();
this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
},
setupFigure : function(){
for(var i = 0, length = this.particles.length; i < length; i++){
this.particles[i].setAxis(this.strategies[this.strategyIndex]());
}
if(++this.strategyIndex == this.strategies.length){
this.strategyIndex = 0;
}
this.translationCount = 0;
},
drawFigure : function(){
requestAnimationFrame(this.drawFigure);
this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';
this.context.fillRect(0, 0, this.width, this.height);
for(var i = 0, length = this.particles.length; i < length; i++){
var axis = this.particles[i].getAxis2D(this.theta);
this.context.beginPath();
this.context.fillStyle = axis.color;
this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
this.context.fill();
}
this.theta++;
this.theta %= 360;
for(var i = 0, length = this.particles.length; i < length; i++){
this.particles[i].rotateX(this.rotationX);
this.particles[i].rotateY(this.rotationY);
}
this.translationCount++;
this.translationCount %= this.TRANSLATION_COUNT;
if(this.translationCount == 0){
this.setupFigure();
}
}
};
var STRATEGY = {
SCATTER_RADIUS :150,
CONE_ASPECT_RATIO : 1.5,
RING_COUNT : 5,
getStrategies : function(){
var strategies = [];
for(var i in this){
if(this[i] == arguments.callee || typeof this[i] != 'function'){
continue;
}
strategies.push(this[i].bind(this));
}
return strategies;
},
createSphere : function(){
var cosTheta = Math.random() * 2 - 1,
sinTheta = Math.sqrt(1 - cosTheta * cosTheta),
phi = Math.random() * 2 * Math.PI;
return {
x : this.SCATTER_RADIUS * sinTheta * Math.cos(phi),
y : this.SCATTER_RADIUS * sinTheta * Math.sin(phi),
z : this.SCATTER_RADIUS * cosTheta,
hue : Math.round(phi / Math.PI * 30)
};
},
createTorus : function(){
var theta = Math.random() * Math.PI * 2,
x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta),
y = this.SCATTER_RADIUS / 6 * Math.sin(theta),
phi = Math.random() * Math.PI * 2;
return {
x : x * Math.cos(phi),
y : y,
z : x * Math.sin(phi),
hue : Math.round(phi / Math.PI * 30)
};
},
createCone : function(){
var status = Math.random() > 1 / 3,
x,
y,
phi = Math.random() * Math.PI * 2,
rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;
if(status){
y = this.SCATTER_RADIUS * (1 - Math.random() * 2);
x = (this.SCATTER_RADIUS - y) * rate;
}else{
y = -this.SCATTER_RADIUS;
x = this.SCATTER_RADIUS * 2 * rate * Math.random();
}
return {
x : x * Math.cos(phi),
y : y,
z : x * Math.sin(phi),
hue : Math.round(phi / Math.PI * 30)
};
},
createVase : function(){
var theta = Math.random() * Math.PI,
x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8,
y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2,
phi = Math.random() * Math.PI * 2;
return {
x : x * Math.cos(phi),
y : y,
z : x * Math.sin(phi),
hue : Math.round(phi / Math.PI * 30)
};
}
};
var PARTICLE = function(center){
this.center = center;
this.init();
};
PARTICLE.prototype = {
SPRING : 0.01,
FRICTION : 0.9,
FOCUS_POSITION : 300,
COLOR : 'hsl(%hue, 100%, 70%)',
init : function(){
this.x = 0;
this.y = 0;
this.z = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.color;
},
setAxis : function(axis){
this.translating = true;
this.nextX = axis.x;
this.nextY = axis.y;
this.nextZ = axis.z;
this.hue = axis.hue;
},
rotateX : function(angle){
var sin = Math.sin(angle),
cos = Math.cos(angle),
nextY = this.nextY * cos - this.nextZ * sin,
nextZ = this.nextZ * cos + this.nextY * sin,
y = this.y * cos - this.z * sin,
z = this.z * cos + this.y * sin;
this.nextY = nextY;
this.nextZ = nextZ;
this.y = y;
this.z = z;
},
rotateY : function(angle){
var sin = Math.sin(angle),
cos = Math.cos(angle),
nextX = this.nextX * cos - this.nextZ * sin,
nextZ = this.nextZ * cos + this.nextX * sin,
x = this.x * cos - this.z * sin,
z = this.z * cos + this.x * sin;
this.nextX = nextX;
this.nextZ = nextZ;
this.x = x;
this.z = z;
},
rotateZ : function(angle){
var sin = Math.sin(angle),
cos = Math.cos(angle),
nextX = this.nextX * cos - this.nextY * sin,
nextY = this.nextY * cos + this.nextX * sin,
x = this.x * cos - this.y * sin,
y = this.y * cos + this.x * sin;
this.nextX = nextX;
this.nextY = nextY;
this.x = x;
this.y = y;
},
getAxis3D : function(){
this.vx += (this.nextX - this.x) * this.SPRING;
this.vy += (this.nextY - this.y) * this.SPRING;
this.vz += (this.nextZ - this.z) * this.SPRING;
this.vx *= this.FRICTION;
this.vy *= this.FRICTION;
this.vz *= this.FRICTION;
this.x += this.vx;
this.y += this.vy;
this.z += this.vz;
return {x : this.x, y : this.y, z : this.z};
},
getAxis2D : function(theta){
var axis = this.getAxis3D(),
scale = this.FOCUS_POSITION / (this.FOCUS_POSITION + axis.z);
return {x : this.center.x + axis.x * scale, y : this.center.y - axis.y * scale, color : this.COLOR.replace('%hue', this.hue + theta)};
}
};
$(function(){
RENDERER.init(STRATEGY);
});
</script>
</html>
二进制代码雨装逼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二进制雨</title>
</head>
<body align="center">
<h2>二进制雨</h2>
<canvas id="myCanvas" width="480px" height="320px" style="background-color: black;"></canvas>
</body>
<script>
var draw=function(ctx,x,y,size){
this.ctx=ctx;
this.x=x;
this.y=y;
this.size=size;
var y1=this.y;
this.drawText=function(){
var str=Math.ceil(Math.random()*10000).toString(2);
var grd=this.ctx.createLinearGradient(this.x,this.y,this.x,this.y-this.ctx.measureText(str).width);
grd.addColorStop(0,"#00FF00");
grd.addColorStop(1,"#004400");
this.ctx.fillStyle=grd;
this.ctx.font=this.size+"px Arial";
for(var i=str.length-1;i>=0;i--) {
this.ctx.fillText(str.charAt(i), this.x, y1-=15);
}
y1=this.y+=10;
if(y1-720+this.ctx.measureText(str).width>0){
this.x=Math.ceil(Math.random()*1000);
y1=this.y=Math.ceil(Math.random()*100);
}
}
};
var rain=function(ctx,length){
this.length=length;
this.ctx=ctx;
var x=[];
var y=[];
var size=[];
var texts=[];
var i=0;
for(;i<length;i++){
x[i]=Math.ceil(Math.random()*1000);
y[i]=Math.ceil(Math.random()*500);
size[i]=Math.ceil(Math.random()*15);
texts[i]=new draw(this.ctx,x[i],y[i],size[i]);
}
this.run=function(){
ctx.clearRect(0,0,1000,600);
for(var j=0;j<length;j++){
texts[j].drawText();
}
};
};
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var rain0=new rain(ctx,100);
setInterval(rain0.run,50);
</script>
</html>
时钟
<style>
div {
text-align: center;
}
#clock {
border: 1px solid #cccccc;
}
</style>
<div>
<canvas id="clock" height="600px" width="600px"></canvas>
</div>
<script>
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {
ctx.save(); //存储当前环境变量；
ctx.translate(r, r); //重置坐标到r，r
ctx.beginPath(); // 起始一条路径
ctx.lineWidth = 10*rem; //设置线宽10；
ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
ctx.stroke();
var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
ctx.font = 18*rem+"px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
hourNumbers.forEach(function(number, i) {
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30*rem);
var y = Math.sin(rad) * (r - 30*rem);
ctx.fillText(number, x, y);
});
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad) * (r - 18*rem);
var y = Math.sin(rad) * (r - 18*rem);
ctx.beginPath();
if (i % 5 === 0) {
ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
ctx.fillStyle = "#000";
} else {
ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
ctx.fillStyle = "#ccc";
}
ctx.fill();
}
}
function drawHour(hour, minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 / 60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 6*rem;
ctx.lineCap = "round";
ctx.moveTo(0, 10*rem);
ctx.lineTo(0, -r / 2);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3*rem;
ctx.lineCap = "round";
ctx.moveTo(0, 10*rem);
ctx.lineTo(0, -r + 30*rem);
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'red';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2*rem, 20*rem);
ctx.lineTo(2*rem, 20*rem);
ctx.lineTo(1, -r + 16*rem);
ctx.lineTo(-1, -r + 16*rem);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
ctx.fill();
}
function draw01() {
ctx.clearRect(0, 0, width, height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour, minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
draw01();
setInterval(draw01, 1000);
</script>
