canvas--绚丽的时钟效果

最新推荐文章于 2024-08-15 17:26:23 发布
最新推荐文章于 2024-08-15 17:26:23 发布
阅读量383 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsy__lsy/article/details/80350028
版权

参考文档:https://blog.csdn.net/heyan1106yan/article/details/52998285

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>border</title>
<style type="text/css">
</style>
</head>
<bodyn style=" width: 100%; height: 100%;">
<div class="">
     <canvas id="canvas" width="1024" height="768" style=" border: 1px solid #aaa; display: block; margin:100px auto 0"></canvas>      
</div>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</body>

</html>

digit.js存放数字小球的三位数组 矩阵排列

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

countdown.js

var WINDOW_WIDTH=document.body.clientWidth;   //若想屏幕自适应则获取屏幕宽高并设置
var WIDTH_HEIGHT=document.body.clientHeight
var RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
var MARGIN_TOP=Math.round(WINDOW_WIDTH/5);
var MARGIN_LEFT=Math.round(WINDOW_WIDTH/10)
var curShowTimeseconds=0
window.οnlοad=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=WINDOW_WIDTH;
canvas.height=WIDTH_HEIGHT;
curShowTimeseconds=getCurrentShowTimeSeconds();
setInterval(function(){
render(context)
update()
},50);
}
function getCurrentShowTimeSeconds(){
    var curTime=new Date();     
    return curTime
}
function update(){
var nextShowTimeSeconds=getCurrentShowTimeSeconds();
var nexthours=nextShowTimeSeconds.getHours();
var nextminutes=nextShowTimeSeconds.getMinutes();
var nextsecondes=nextShowTimeSeconds.getSeconds();
 
var curhours=curShowTimeseconds.getHours();     
var curminutes=curShowTimeseconds.getMinutes();
var cursecondes=curShowTimeseconds.getSeconds();  
if(nextsecondes!=cursecondes){
if(parseInt(nexthours/10)!=parseInt(nexthours/10)){ //小时
addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curhours/10));
}
if(parseInt(nexthours%10)!=parseInt(nexthours%10)){ //小时
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curhours%10));
}
if(parseInt(nextminutes/10)!=parseInt(curminutes/10)){ //分钟
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));
}
if(parseInt(nextminutes%10)!=parseInt(curminutes%10)){ //分钟
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curminutes%10));
}
if(parseInt(nextsecondes/10)!=parseInt(cursecondes/10)){ //秒
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));
}
if(parseInt(nextsecondes%10)!=parseInt(cursecondes%10)){ //秒
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curminutes/10));    
}
}
curShowTimeseconds = nextShowTimeSeconds;  //!重点赋值
updateBalls();  
}
function updateBalls(){
for(var i=0;i<balls.length;i++){
balls[i].x+=balls[i].vx;
balls[i].y+=balls[i].vy;
balls[i].vy+=balls[i].g;
//添加碰撞检测
        if(balls[i].y>= WIDTH_HEIGHT - balls[i].r){
            balls[i].y = WIDTH_HEIGHT - balls[i].r;
            balls[i].vy = -balls[i].vy * 0.75; 
        }
        
}
   /**
     * 这里进行小球数量的删除
     */
    var count = 0;//保存当前存在在画布上的小球数量
    for(var i = 0;i < balls.length; i++){
        /**
         * @param  {[type]} balls[i].x +  RADIUS > 0  [小球的右边缘大于0]
         * @param {[type]} balls[i].x - RADIUS < WIDDOW_WIDTH  [小球的左边缘小于画布的宽度]
         */
        if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){
            balls[count++] = balls[i];//执行完这步操作之后，前count个元素都是存在在画布上面的小球，count后面的数据就是应该删除的小球
        }
    }
    //删除不在画布上的小球
    /**
     * 为保证一定的运算速率，避免计算机因性能低而计算失误，那么最多只保留300个小球，
     * 因为count的值有可能比300大很多，所以取最小值
     * Math.min(300,count)
     */
    while(balls.length > Math.min(300,count)){
        balls.pop();
    }
}


function addBalls(x,y,num){
for(var i=0;i<digit[num].length;i++){
for(var j=0;j<digit[num][i].length;j++){
             if(digit[num][i][j] == 1){
                //定义小球的参数
                var ball = {
                    x:x+j*2*(RADIUS+1)+(RADIUS+1),
                    y: y+i*2*(RADIUS+1)+(RADIUS+1),
                    r:RADIUS,
                    g:1.5 + Math.random(),
                    /**
                     * Math.random() * 1000：0-1000的随机数
                     * Math.ceil(Math.random() * 1000)：取整
                     * Math.pow( -1 , Math.ceil(Math.random() * 1000)):-1的多少次方，即是1还是-1
                     */
                    vx:Math.pow( -1 , Math.ceil(Math.random() * 1000)) * 4,
                    vy:-5,
                    color:colors[Math.ceil(Math.random() * colors.length)]
                }
                balls.push(ball);
            }

}
}
}
function render(cxt){
    cxt.clearRect(0,0,WINDOW_WIDTH,WIDTH_HEIGHT)     
    var hours=curShowTimeseconds.getHours();     
    var minutes=curShowTimeseconds.getMinutes();
    var secondes=curShowTimeseconds.getSeconds();
    //console.log(secondes);
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt) ;   
    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);  //MARGIN_LEFT+15*(RADIUS+1)矩阵为7个小球 缩影是14个 半径 为了和左边保持距离所以设置了15
    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);  //冒号：字符占用的是9
    renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
    renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);
    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(secondes/10),cxt);
    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(secondes%10),cxt);     
         //对小球进行绘制
         //console.log(balls);
    for(var i = 0;i < balls.length ; i++){
       cxt.fillStyle = balls[i].color;
       cxt.beginPath();
       cxt.arc(balls[i].x,balls[i].y,balls[i].r, 0 ,Math.PI*2);
       cxt.closePath();
       cxt.fill();
    }
}
//声明一个存放小球的数组
var balls = [];
//小球颜色数组  
var colors = ['#e83355','#e95cd0','#e133ec','#a033ec','#7d33ec','#3c33ec','#336cec','#33ecdd','#33ec70','#ec6733'];
function renderDigit(x,y,num,cxt){
cxt.fillStyle='rgb(0,102,153)';
for(var i=0;i<digit[num].length;i++){  
for(var j=0;j<digit[num][i].length;j++){
if(digit[num][i][j]==1){
cxt.beginPath();
cxt.arc(x+j*2*( RADIUS+1)+(RADIUS),y+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}

小水91
关注
canvas画时钟
pumpkin_truck的博客
06-04 2544
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果.zip
07-11
《基于jQuery和Canvas的简洁时钟效果实现详解》 在网页设计中，动态时钟效果是一种常见的视觉元素，能够为用户界面增添互动性和趣味性。本文将深入探讨一个基于jQuery和HTML5 Canvas技术的“jQuery.clock-canvas”...
canvas-clock:网络画布时钟
05-15
canvas_clock 网络画布时钟 演示版 # run the demo npm start 只是一个演示，展示一个简单的画布
Canvas-时钟
10-25
HTML5 <canvas> 标签通过js用于绘制图像。这是用Canvas绘制的一个实时时钟，适合菜鸟级哦~
用 js canvas 做一个优雅的模拟时钟， canvas 教程实例
最新发布
学习笔记
08-15 903
有很多次，我都想找到一个比较不错的，可以查看模拟时钟的网页。 有时候是想看下距离某个时间点还有多长时间，有时候是想看一下，两个时间点之间的间隔是多少。因为模拟时钟的排布比数字时钟要更直观。 但一直没有找到。这些天闲的时候就想做个 canvas 模拟时钟玩，慢慢就做出效果来了。 目前的大致效果如下：可访问的地址：我对模拟时钟的需求有几个：你需要具备使用 canvas 绘制简单图形的能力，不需要复杂，会画个方块、圆、文字，就可以了。 很简单，直接看 MDN 官方文档上的例子就能看明白。会了基础的操作之后，就说一
1.9 炫丽的动画效果之使用canvas实现自由落体下落物理实验｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
1.9_炫丽的动画效果之使用canvas实现自由落体下落物理实验｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全
使用html+js实现动态时钟
11-20
插件描述:就是用纯html+js+css写的一个动态时钟PREVIOUS: NEXT: 纵向tab插件tabWeek.js Simple Switch一个简单的开关 相关插件-日期和时间
canvas绚丽的时钟效果（上）
MayMayJn的博客
12-07 683
canvas是HTML5的特性，是定义在浏览器上的画布。前端好多精美的网页都会用到canvas这一特性。 慕课网上有很多canvas的教程，我学了一个比较基础但是效果非常引人入胜的教程，就是用canvas动画实现倒计时效果。用canvas进行基础的绘画：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
canvas炫酷时钟
asd1242189163的博客
05-06 260
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html： <canvas id="myCanvas" width="500" height="500"></canvas> css： #myCanvas{ position: absolute; top: 50%; ...
canvas时钟
喜欢文学的程序员
06-02 936
canvas是HTML5新增的组件，提供了新的javascript API。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas就像是页面上的一块画布，而jav...
canvas--时钟
qq_15980201的博客
12-19 371
可以进群领取 WEB前端学习交流群21 598399936         canvas时钟             div {             text-align: center;             margin-top: 15%;         }             var dom = document
canvas实现超级炫酷时钟
02-06
利用canvas和javascript完成超级炫酷的时钟，用canvas画点绘制数字，小球模拟抛物运动
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果
06-12
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px;... 一个非常不错的好用的时钟动画效果 基于canvas实现的效果，可以实时模拟当前时间   使用方法： 1、将body中的代码部分拷贝过去即可
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
canvas制作酷炫时钟
墨羽晨的博客
10-04 291
先看效果图 可以配合之前的动态时钟，效果不错 js进阶实例，数字时钟_墨者羽晨的博客-CSDN博客先看效果，动态数字时钟用到了jQuery，但是只是用来获取元素，只有一点点面向对象开发看代码HTML，自己引入jQuery和js，jQuery在前<body> <div class="wrapper"> <div class="column"> <!-- 此div表示时的十位，只有0,1,2三个 --> <div>0</div> .
canvas绘制炫酷时钟
weixin_43967169的博客
05-17 115
canvas绘制时钟刻度表 基本知识点 canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段，指定起始位置就好 canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态 canvas.restore:恢复到保存时候的canvas状态，这么理解：translate平移了坐标，从初始位置屏幕左上角（0,0）到屏幕中间(mWidth/2,mHeight/2)，这时候如
使用HTML5绘制时钟,使用canvas绘制超炫时钟
weixin_35057850的博客
06-15 114
先上效果图：复制代码代码如下:canvas钟表body{margin:0;}如果你看到这段文字，说明你的浏览器弱爆了！window.onload=draw;function draw() {var canvas=document.getElementById('canvas');var context=canvas.getContext('2d');context.save(); ////////...
Canvas时钟
candy_tity的博客
11-23 822
canvas可以用极少的代码实现酷炫的功能。 今天tity带大家实现一个简单的时钟效果，先铺代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> canvas { di
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值