canvas 简易版时钟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>时钟</title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#fff;
}
canvas{
background:#fff;
display:block;
margin:100px auto;
}
</style>
</head>
<body>
<canvas id="mycanvas" width='500' height='500'>
</canvas>
<script>
var can=document.getElementById("mycanvas");
var cxt=can.getContext('2d');
function clock(){
//清除画布，每次执行重新绘图，解决时钟模糊，边框有锯齿。
cxt.clearRect(0,0,can.width,can.height);
var now=new Date();
var hours=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
min=min+sec/60;
hours=hours+min/60
//绘制表盘 绘制分针刻度
cxt.lineWidth=2;
for(var i=0;i<60;i++){
cxt.beginPath();
cxt.strokeStyle="#000";
cxt.moveTo(250,250);
cxt.arc(250,250,100,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
cxt.closePath();
cxt.stroke();
}
cxt.beginPath();
cxt.arc(250,250,95,0,360,false);
cxt.closePath();
cxt.fillStyle="#fff";
cxt.fill();
//绘制时针刻度
for(var i=0;i<12;i++){
cxt.beginPath();
cxt.strokeStyle="#000";
cxt.moveTo(250,250);
cxt.arc(250,250,100,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
}
cxt.beginPath();
cxt.arc(250,250,90,0,360,false);
cxt.closePath();
cxt.fillStyle="#fff";
cxt.fill();
//绘制时针
cxt.beginPath();
cxt.strokeStyle="#000";
cxt.moveTo(250,250);
cxt.arc(250,250,75,(-90+hours*30)*Math.PI/180,(-90+hours*30)*Math.PI/180,false);
cxt.lineWidth=5;
cxt.closePath();
cxt.stroke();
//绘制分针
cxt.beginPath();
cxt.strokeStyle="#000";
cxt.moveTo(250,250);
cxt.arc(250,250,85,(-90+min*6)*Math.PI/180,(-90+min*6)*Math.PI/180,false);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
//绘制秒针
cxt.beginPath();
cxt.moveTo(250,250);
cxt.arc(250,250,90,(-90+sec*6)*Math.PI/180,(-90+sec*6)*Math.PI/180,false);
cxt.lineWidth=2;
cxt.strokeStyle="#f00";
cxt.closePath();
cxt.stroke();
//绘制中心
cxt.beginPath();
cxt.arc(250,250,5,0,360,false);
cxt.fillStyle="#000";
cxt.closePath();
cxt.fill();
}
//时间关联
clock();
setInterval(clock,1000)
</script>
</body>
</html>
canvas烟花粒子
window.requestAnimFrame=(function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){
window.setTimeout(callback,1000/60);
};
})();
var can=document.getElementById("canvas");
// can.width=document.body.clientWidth ;
// can.height=document.body.clientHeight;
var cw=window.innerWidth;
var ch=window.innerHeight;
can.width=cw ;
can.height=ch;
var cxt=can.getContext("2d");
var circles=[]; //存放圆形粒子池
var rects=[]; //存放正方形粒子池
var triangles=[]; //存放三角形粒子池
var i=0;
var count=100;
var x; //鼠标的位置
var y;
/**
* 圆形粒子对象
* @param {[type]} x [description] 中心点
* @param {[type]} y [description] 中心点
* @param {[type]} r [description] 半径
*/
function Circle(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.speed=Math.random()*0.5+1; //速度
this.direction=Math.random()*Math.PI*2; //方向
}
/**
* 更新圆心坐标
* @return {[type]} [description]
*/
Circle.prototype.update=function(){
this.x+=Math.cos(this.direction)*this.speed;
this.y+=Math.sin(this.direction)*this.speed;
if(this.x<this.r){
this.x=this.r;
this.direction=Math.PI-this.direction;
}
else if(this.x>=(cw-this.r)){
this.x=cw-this.r;
this.direction=Math.PI-this.direction;
}
if(this.y<this.r){
this.y=this.r;
this.direction=-this.direction;
}
else if(this.y>=(ch-this.r)){
this.y=ch-this.r;
this.direction=-this.direction;
}
};
/**
* 绘制圆形粒子
* @return {[type]} [description]
*/
Circle.prototype.draw=function(){
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,360,false);
cxt.closePath();
cxt.fillStyle="#f66";
if(this.x>x-50&&this.x<x+50&&this.y>y-50&&this.y<y+50){
cxt.globalAlpha=1;
}else{
cxt.globalAlpha=0.2;
}
cxt.fill();
};
/**
* 矩形粒子对象
* @param {[type]} x 起点位置
* @param {[type]} y 起点位置
* @param {[type]} w 矩形宽
* @param {[type]} h 矩形长
*/
function Rect(x,y,w,h){
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.x0=Math.random()*cw; //正方形的中心坐标 为了旋转而设定
this.y0=Math.random()*ch; //正方形的中心坐标
this.r=Math.sqrt(Math.pow(this.w/2,2)+Math.pow(this.h/2,2));
this.speed=Math.random()*0.5+1; //速度
this.direction=Math.random()*Math.PI*2; //方向
}
/**
* 更新粒子坐标
* @return {[type]} [description]
*/
Rect.prototype.update=function(){
this.x0+=Math.cos(this.direction)*this.speed;
this.y0+=Math.sin(this.direction)*this.speed;
if(this.x0<this.r){
this.x0=this.r;
this.direction=Math.PI-this.direction;
}else if(this.x0>cw-this.r){
this.x0=cw-this.r;
this.direction=Math.PI-this.direction;
}
if(this.y0<this.r){
this.y0=this.r;
this.direction=-this.direction;
}else if(this.y0>ch-this.r){
this.y0=ch-this.r;
this.direction=-this.direction;
}
};
/**
* 绘制正方形粒子
* @return {[type]} [description]
*/
Rect.prototype.draw=function(){
cxt.save();
cxt.fillStyle="#06c";
cxt.translate(this.x0,this.y0); //将坐标原点移至圆心 方便旋转
cxt.rotate(i*Math.PI/180);
cxt.beginPath();
if(this.x0>x-50&&this.x0<x+50&&this.y0>y-50&&this.y0<y+50){
cxt.globalAlpha=1;
}else{
cxt.globalAlpha=0.5;
}
cxt.fillRect(this.x,this.y,this.w,this.h);
cxt.closePath();
cxt.restore();
};
/**
* 等边三角形粒子
* @param {[type]} h 三角形高
* @return {[type]} [description]
*/
function Triangle(b){
this.b=b;
this.x0=Math.random()*cw;
this.y0=Math.random()*ch;
this.speed=Math.random()*0.5+1;
this.direction=Math.random()*Math.PI*2;
this.r=this.b/2*Math.tan(30*Math.PI/180);
console.log(this.r+" "+this.b);
}
/**
* 中心更新
* @return {[type]} [description]
*/
Triangle.prototype.update=function(){
this.x0+=Math.cos(this.direction)*this.speed;
this.y0+=Math.sin(this.direction)*this.speed;
if(this.x0<this.r){
this.x0=this.r;
this.direction=Math.PI-this.direction;
}else if(this.x0>cw-this.r){
this.x0=cw-this.r;
this.direction=Math.PI-this.direction;
}
if(this.y0<this.r){
this.y0=this.r;
this.direction=-this.direction;
}else if(this.y0>ch-this.r){
this.y0=ch-this.r;
this.direction=-this.direction;
}
};
Triangle.prototype.draw=function(){
cxt.save();
cxt.fillStyle="#86c";
cxt.translate(this.x0,this.y0);
cxt.rotate(i*Math.PI/180);
cxt.beginPath();
cxt.moveTo(-this.b/2,-this.r);
cxt.lineTo(0,Math.sin(60*Math.PI/180)*this.b-this.r);
cxt.lineTo(this.b/2,-this.r);
cxt.closePath();
if(this.x0>=x-50&&this.x0<=x+50&&this.y0>=y-50&&this.y0<=y+50){
cxt.globalAlpha=1;
}else{
cxt.globalAlpha=0.2;
}
cxt.fill();
cxt.restore();
};
while(count--){
var w=Math.random()*cw;
var h=Math.random()*ch;
circles.push(new Circle(w,h,5));
rects.push(new Rect(-5,5,10,10));
triangles.push(new Triangle(10));
}
canvas.onmousemove=function(ev){
var ev=ev||window.event;
x=ev.pageX;
y=ev.pageY;
console.log(x+"..."+y);
};
/**
* 在画布中绘制圆形粒子
* @return {[type]} [description]
*/
function loop(){
requestAnimFrame(loop);
i++;
if(i>10000){
i=0;
}
cxt.globalCompositeOperation="destination-out";
cxt.fillStyle="rgba(0,0,0,1)";
//透明度
cxt.globalAlpha=1;
cxt.fillRect(0,0,cw,ch);
//显示重叠的部分
cxt.globalCompositeOperation="lighter";
var n=circles.length;
while(n--){
circles[n].draw();
circles[n].update();
}
var n=rects.length;
while(n--){
rects[n].draw();
rects[n].update();
}
var n=triangles.length;
while(n--){
triangles[n].draw();
triangles[n].update();
}
}
window.onload=loop;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
