canvas颗粒时钟-阿里云开发者社区

canvas颗粒时钟

2023-04-01 68

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用canvas做一个颗粒时钟，附带动态效果

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>颗粒时钟</title></head><style>* {
margin: 0;
padding: 0;
    }
html,body{
overflow: hidden;
    }
canvas {
background: radial-gradient(#fff, #8c738c);display: block;
    }
</style><body><canvas></canvas></body></html><script>constcanvas=document.querySelector('canvas')
constctx=canvas.getContext('2d', {
willReadFrequently: true    })
//颗粒数量constPARTICLE_NUM=15000//绘制的文本lettext=''//绘制的文本字体大小constFONT_SIZE=140;
//颗粒对象形成的数组constparticles=newArray(PARTICLE_NUM)
//颗粒颜色constCOLOR='#5445544d';
//随机尺寸范围constSIZES= [2, 7];
//开始移动时间letstartMoveTime=0;
//获取【min,max】范围内的随机整数functiongetRandom(min, max) {
returnMath.floor(Math.random() * (max+1-min) +min);
    }
//初始化functioninit() {
//初始话画布canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//初始化颗粒对象数组constcx=canvas.width/2,
cy=canvas.height/2;
for (leti=0; i<particles.length; i++) {
constrad=Math.random() *2*Math.PI;
constsize=getRandom(SIZES[0], SIZES[1]);
constr=canvas.height/2;
particles[i] = {
sx: cx+Math.cos(rad) *r,
sy: cy+Math.sin(rad) *r,
x: cx+Math.cos(rad) *r,
y: cy+Math.sin(rad) *r,
size            };
drawParticle(particles[i])
        }
    }
//刷新绘制functionfps() {
requestAnimationFrame((time) => {
//要绘制的文本constcurText=getText();
if (curText!==text) {
text=curText;//更新文本//文本发生变化，颗粒开始移动//更新颗粒的起始坐标for (constpofparticles) {
p.sx=p.x;
p.sy=p.y;
                }
startMoveTime=Date.now()
            }
//获取像素点constimgData=getBMP();
//更新绘制update(imgData);
fps()
        })
    }
fps()
functiondrawParticle(p) {
ctx.fillStyle=COLOR;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI*2,true)
ctx.closePath();
ctx.fill()
    }
functiongetText() {
// console.log(new Date().toLocaleString())// let day = Date().toLocaleDateString()+ '-' + Date().toLocaleTimeString()// return new  day;varnow=newDate();
varyear=now.getFullYear();       //年varmonth=now.getMonth() +1;     //月varday=now.getDate();            //日varhh=now.getHours();            //时varmm=now.getMinutes();          //分varss=now.getSeconds(); //获取当前秒varclock=year+"-";
if(month<10)
clock+="0";
clock+=month+"-";
if(day<10)
clock+="0";
clock+=day+" ";
if(hh<10)
clock+="0";
clock+=hh+":";
if (mm<10) clock+='0';
if (ss<10) clock+='0';
clock+=mm+":"+ss;
return(clock);
    }
functiongetBMP() {
const {width, height} =canvas;
clear()
ctx.fillStyle='#fff';
ctx.textBaseline='middle';
ctx.font=`${FONT_SIZE}px '手札体-简', sans-serif`;
consttextWidth=ctx.measureText(text).width;
ctx.fillText(text, (width-textWidth) /2, height/2);
constimgData=ctx.getImageData(0, 0, width, height)
returnimgData    }
functionupdate(imgData) {
clear();
const {width, height, data} =imgDataconstdis=4constpxls= [];
for (letw=0; w<width; w+=dis) {
for (leth=0; h<height; h+=dis) {
consti= (w+h*width) *4;
if (data[i] >10) {
pxls.push([w, h]);
                }
            }
        }
constcount=Math.min(particles.length , pxls.length)
constduration=400;
consttimeSpan=Date.now() -startMoveTimefor (leti=0; i<count; i++) {
constp=particles[i];
constsx=p.sx;
constsy=p.sy;
consttx=pxls[i][0];
constty=pxls[i][1];
constdisX=tx-sx,
disY=ty-sy;
letmoveX= (disX/duration) *timeSpan,
moveY= (disY/duration) *timeSpan;
if (Math.abs(moveX) >Math.abs(disX)){
moveX=disX            }
if (Math.abs(moveY) >Math.abs(disY)){
moveY=disY            }
p.x=sx+moveX;
p.y=sy+moveY;
drawParticle(p)
        }
    }
functionclear() {
const {width , height} =canvas;
ctx.clearRect(0,0,width,height);
    }
init();
</script>

canvas颗粒时钟

热门文章

最新文章

相关电子书