借来的创意

一.简介

计数是一种最简单基本的运算，计数器就是实现这种运算的逻辑电路，计数器在数字系统中主要是对脉冲的个数进行计数，以实现测量、计数和控制的功能，同时兼有分频功能，计数器是由基本的计数单元和一些控制门所组成，计数单元则由一系列具有存储信息功能的各类触发器构成，这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛，如在电子计算机的控制器中对指令地址进行计数，以便顺序取出下一条指令，在运算器中作乘法、除法运算时记下加法、减法次数，又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态，一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主要的指标在于计数器的位数，常见的有3位和4位的。很显然，3位数的计数器最大可以显示到999，4位数的最大可以显示到9999。

二.计数器作用

在数字电子技术中应用的最多的时序逻辑电路。计数器不仅能用于对时钟脉冲计数，还可以用于分频、定时、产生节拍脉冲和脉冲序列以及进行数字运算等。但是并无法显示计算结果，一般都是要通过外接LCD或LED屏才能显示。

三.粒子计数器实现

我们采用4*7一共28个格子来显示0-9这十个数字,比如填满就是：

        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        cxt.fillStyle = "#FF0000";

        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 7; j++) {
                cxt.arc(100 + i * 20, 100 + j * 20, 5, 0, Math.PI * 2, true);
            }
        }

比如画一个数字一：

        var one = [];
        one.push({ x: 3, y: 0 });
        one.push({ x: 3, y: 1 });
        one.push({ x: 3, y: 2 });
        one.push({ x: 3, y: 3 });
        one.push({ x: 3, y: 4 });
        one.push({ x: 3, y: 5 });
        one.push({ x: 3, y: 6 });

数字二：

        var two = [];
        two.push({ x: 0, y: 0 });
        two.push({ x: 1, y: 0 });
        two.push({ x: 2, y: 0 });
        two.push({ x: 3, y: 0 });
        two.push({ x: 3, y: 1 });
        two.push({ x: 3, y: 2 });
        two.push({ x: 3, y: 3 });
        two.push({ x: 2, y: 3 });
        two.push({ x: 1, y: 3 });
        two.push({ x: 0, y: 3 });
        two.push({ x: 0, y: 4 });
        two.push({ x: 0, y: 5 });
        two.push({ x: 0, y: 6 });
        two.push({ x: 1, y: 6 });
        two.push({ x: 2, y: 6 });
        two.push({ x: 3, y: 6 });

以此类推····

我们使用JSLINQ获取下次要坠落的粒子：

            if (num === 1) {
                for (i in one) {
                    var result = JSLINQ(two).
            Count(function (item) { return item.x == one[i].x && item.y == one[i].y; });
                    if (result == 0) {
                        var ball = { x: 100 + one[i].x * 20, y: 100 + one[i].y * 20, r: 8, vx: getRandomNumber(-250,250), vy: getRandomNumber(-150, 150) };
                        dropBall.push(ball);
                    }
                }
            }

用Jscex实现动画效果

        var drawAsync = eval(Jscex.compile("async", function () {
            while (true) {
                try {
                    if (dropBall.length > 100) dropBall.shift();
                    cxt.clearRect(0, 0, canvas.width, canvas.height);
                    cxt.beginPath();
                    draw(count % 10);

                    for (i in dropBall) {
                        cxt.arc(dropBall[i].x, dropBall[i].y, dropBall[i].r, 0, Math.PI * 2, true);

                        dropBall[i].y += dropBall[i].vy * cyc / 1000;

                        dropBall[i].x += dropBall[i].vx * cyc / 1000;
                       

                        if (dropBall[i].r + dropBall[i].y > canvas.height) {

                            dropBall[i].vy *= -0.7;

                            dropBall[i].y = canvas.height - dropBall[i].r;
                           
                        }
                        dropBall[i].vy += a;

                    }
                    cxt.fill();
                    t += cyc;
                    if (t >= 1000) {
                        getBalls(count % 10);
                        t = 0;
                        count++;
                        draw(count % 10);
                    }

                }
                catch (e) {
                    alert(e)
                }
                $await(Jscex.Async.sleep(cyc));
            }

        }))

值得注意的是其中处理不同步的帧的常用方法之一

                    t += cyc;
                    if (t >= 1000) {
                        getBalls(count % 10);
                        t = 0;
                        count++;
                        draw(count % 10);
                    }

四.在线演示

五.同步

本文已同步更新至：

HTML5实验室【目录】:   http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html