文档章节

Canvas时针加上动态的小球

罗码码
 罗码码
发布于 2017/11/30 22:46
字数 723
阅读 1
收藏 0

效果图:

在上一篇倒计时的基础上,对tangram.js做了如下修改:

WINDOW_WIDTH = 1024;
WINDOW_HEIGHT = 768;
//半径
var RADIUS = 8;
//顶边距
var MARGIN_TOP = 250;
//左边距
var MARGIN_LEFT = 30;

//截止时间
var endTime = new Date(2017,10,30,23,30,00);
//当前时间
var curShowTimeSeconds = 0;

//小球数组
var balls = [];
//颜色数组
var colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];


/**
 * 启动加载
 */
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    
    curShowTimeSeconds = getCurrentShowTimeSeconds();
    
    setInterval(function(){
        render(context);
        update();
    },50);
}

/**
 * 获取当前时间的毫秒
 */
function getCurrentShowTimeSeconds(){
    var curTime = new Date();
    var ret = endTime.getTime()-curTime.getTime();
    ret = Math.round(ret/1000);
    return ret >= 0 ? ret : 0;
}

/**
 * 判断当前显示的时间是否和系统时间相等
 * 如果不相当,重新绘画
 */
function update(){
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    
    var nexthours = parseInt(nextShowTimeSeconds/3600);
    var nextMinute = parseInt((nextShowTimeSeconds-nexthours*3600)/60);
    var nextsecond = parseInt(nextShowTimeSeconds%60);
    
    var curhours = parseInt(curShowTimeSeconds/3600);
    var curMinute = parseInt((curShowTimeSeconds-curhours*3600)/60);
    var cursecond = parseInt(curShowTimeSeconds%60);

    
    if(nextShowTimeSeconds != curShowTimeSeconds){
        if(parseInt(nexthours/10) != parseInt(curhours/10)){
            allBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(nexthours/10));
        }
        if(parseInt(nexthours%10) != parseInt(curhours%10)){
            allBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nexthours%10));
        }
        if(parseInt(nextMinute/10) != parseInt(curMinute/10)){
            allBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(nextMinute/10));
        }
        if(parseInt(nextMinute%10) != parseInt(curMinute%10)){
            allBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(nextMinute%10));
        }
        if(parseInt(nextsecond/10) != parseInt(cursecond/10)){
            allBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(nextsecond/10));
        }
        if(parseInt(nextsecond%10) != parseInt(cursecond%10)){
            allBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextsecond%10));
        }

        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateBalls();
}

/**
 * 把数字上的小球加上运动属性并加入到balls数组中
 * @param {Object} x
 * @param {Object} y
 * @param {Object} num
 */
function allBalls(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 aBall = {
                    x:x+(RADIUS+1)+j*2*(RADIUS+1),//圆心坐标x
                    y:y+(RADIUS+1)+i*2*(RADIUS+1),//圆心坐标y
                    g:1.5+Math.random(),//加速度
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//x方向的速度,pow取-1的次方,ceil取整数,结果是-4至4
                    vy:-5,//y方向的速度
                    color:colors[Math.floor(Math.random()*colors.length)],//floor下取整结果为:0-9                
                }
                balls.push(aBall);
            }
        }
    }
}

/**
 * 小球不断的变化
 */
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 >= WINDOW_HEIGHT-RADIUS){
            balls[i].y = WINDOW_HEIGHT-RADIUS;
            balls[i].vy =- balls[i].vy*0.7;
        }
    }
}

/**
 * 根据时间调用绘画方法绘画每个数字
 * @param {Object} context
 */
function render (context){
    context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    
    var hours = parseInt(curShowTimeSeconds/3600);
    var Minute = parseInt((curShowTimeSeconds-hours*3600)/60);
    var second = parseInt(curShowTimeSeconds%60);
    
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),context);
    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,context);
    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(Minute/10),context);
    renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(Minute%10),context);
    renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,context);
    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(second/10),context);
    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(second%10),context);
    
    for (var i = 0; i < balls.length; i++) {
        context.fillStyle = balls[i].color;
        context.beginPath();
        context.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
        context.closePath();
        context.fill();
    }

}

/**
 * 绘画时针
 * @param {Object} x 圆心x
 * @param {Object} y 圆心y
 * @param {Object} num 数字
 * @param {Object} context
 */
function renderDigit(x,y,num,context){
    context.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){
                context.beginPath();
                context.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
                context.closePath();
                context.fill();
            }
        }
    }
}

© 著作权归作者所有

共有 人打赏支持
罗码码
粉丝 0
博文 154
码字总数 41577
作品 0
珠海
高级程序员
私信 提问
原生JS实现抛物线动画以及动态模糊效果

苏格团队 作者:Jason 前言 某一天我收到了产品发来的微信消息。小X,我们的业务现在需要一个类似加入购物车的掉落动画,经过组织的慎重考虑,这个需求就交给你了。于是便有了这篇文章。本文...

苏格团队
2018/09/30
0
0
WebAssembly Demo之Canvas中随机运动圆球

作者:云荒杯倾 1、Demo功能介绍 实现了一个圆球在800px * 600px画布内随机运动,固定时间间隔随机运动一次,运动方向由x和y轴组成的向量决定,这个向量是随机值(后面会称它为随机向量),从...

云荒杯倾
2017/09/19
0
0
利用CSS3的animation step属性实现wifi动画(结尾有彩蛋)

之前攒的满满的SVG+CSS3做动画的技能一直未能放个大招,理由很简单,因为本身从事行业的性质,软件里不能出现劳什子动画这等花里胡哨的东西,哦,不不,叫隐喻行为引导的趣味化。用canvas实现...

泱泱
2017/07/28
0
0
canvas 四处乱窜的小球

下面分享一个五彩缤纷,四处乱窜的小球,效果图如下。 QQ20171227-203915-HD.gif 主要思路:使用面向对象的方法:首先定义一个球的构造函数,在函数原型上写两个方法: 1. 画球的方法; 2. 球...

马大哈tt
2017/12/27
0
0
loading动画的性能优化-摒弃Canvas,拥抱CSS3-实现点击特效

项目中有个活动页加载时有个loading动画,效果如上图,连续绽放小球,问题就是太卡,经常出现一堆小球抱团卡住,遂进行优化 注意:(仅在页面加载时卡顿,加载完毕,点击的时候不卡顿) 查看...

杨金凯
2018/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot mockmvc单元测试

1)模拟mvc测试,和基础测试是一样的, 都需要在pom文件中引入junit的支持。   略 2)编写测试类 Application1TestMVC   在类头上除啦加入之前的@RunWith(SpringRunner.class)、@RunWit...

水木星辰
14分钟前
2
0
Spring中用了哪些设计模式?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内...

HOT_POT
19分钟前
0
0
那些70后的程序员都消失了吗?

在娱乐圈,哦不,是在程序员这个吃青春饭的行业,有一个人人闻之色变的话题,曰:「年老色衰」。只要是个程序员,心里都会惴惴不安的想:「我老了以后卖不动色相,哦不,写不动代码了,我还能...

老道士
21分钟前
2
0
Spark和MapReduce的区别

首先大数据涉及两个方面:分布式存储系统(GFS)和分布式计算框架(MapReduce)。 1.MapReduce包含5 个步骤:Map、Sort、Combine、Shuffle 以及Reduce。这5 个步骤中最重要的就是Map 和Reduc...

仟昭
52分钟前
3
0
eclipse配置集成gradle

Gradle是一个好用的构建工具 使用它的原因是 1、配置相关依赖代码量少,不会像maven一样xml过多 2、打包编译测试发布都有,而且使用起来方便 3、利用自定义的任务可以完成自己想要的功能 (一...

五年级小学生
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部