使用CANVAS绘制LED点阵时钟

最新推荐文章于 2023-02-28 21:00:31 发布
最新推荐文章于 2023-02-28 21:00:31 发布
阅读量3.4k 收藏 8
点赞数 1
分类专栏： html5 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yalishizhude/article/details/43907031
版权


核心内容：

1.数字的LED点阵实现方式

点阵的实现方式其实用到了一个二维数组，这里用到了7X10和4X10的二维数组，当数组值为1时绘制红点，当数组为0时绘制灰点，按照这个方法也可以绘制英文字母特殊符号等。

       //数字"9"
            [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]
<span style="white-space:pre">	</span>//冒号":"
            [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]
           <span style="white-space:pre">	</span>

2.canvas绘制圆形

//填充圆形背景色
cxt.fillStyle = "rgb(20,20,20)";
cxt.beginPath();
//绘制圆形，x、y圆心坐标，RADIUS半径，startRadian、endRadian起始弧度，anticlockwise是否逆时针（默认顺时针）
cxt.arc( x , y , RADIUS , startRadian , endRadian, anticlockwise);
cxt.closePath();
cxt.fill();
canvas这里有个坑，就是绘制一个图形的时候记得用beginPath和closePath函数进行包裹，不然绘图时图形参数会被覆盖。
完整代码 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>LED时钟</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>
    <canvas id="canvas" >
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>
    <script src="digit.js"></script>
    <script src="time.js"></script>
</body>
</html>


//点阵数组
var 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]
        ]//:
    ];


var WINDOW_WIDTH = 800;
var WINDOW_HEIGHT = 600;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

var endTime = new Date(2015,1,22,18,47,52);
var curShowTimeSeconds = 0;

window.onload = function(){
    //自适应屏幕
    WINDOW_WIDTH = document.body.clientWidth;
    WINDOW_HEIGHT = document.body.clientHeight;

    MARGIN_LEFT = Math.round(WINDOW_WIDTH /10);
    RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1;

    MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);
    time();
};
/**
 * 绘制LED点阵数字
 */
function render(cxt){
    var curTime = new Date();
    cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
    cxt.fillStyle = "black";
    cxt.fillRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);  //填充颜色 x y坐标 宽 高
    cxt.strokeRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);  //填充边框 x y坐标 宽 高

    var hours = parseInt(curTime.getHours());
    var minutes = parseInt(curTime.getMinutes());
    var seconds = parseInt(curTime.getSeconds());

    renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt );
    renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );
    renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt );
    renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
    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(seconds/10) , cxt);
    renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);
}

function renderDigit( x , y , num , cxt ){
    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.fillStyle = "red";
            } else {
                cxt.fillStyle = "rgb(20,20,20)";
            }
            cxt.beginPath();
            cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI );
            cxt.closePath();
            cxt.fill();
        }
    }
}
/**
 * 开始计时
 * @return {[type]} [description]
 */
function time(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    context.clearRect(0,0,canvas.width, canvas.height);
    setInterval(
        function(){
            render(context);
        },
        50
    );
}



Yalishizhude
关注
专栏目录
canvas 数字点阵时钟 彩色小球动画
weixin_43978604的博客
08-14 620
原创意来自 慕课网 liuyubobobo 教程是免费的 本人参考此教程 用 konva.js 库 实现 canvas 动画效果 效果图 思路可参考 原创意来自 慕课网 liuyubobobo 数字点阵文件 可下载教程里的 digit.js 这里展示第 一种 效果 另外的现个效果 只要改变 小球 相应时段的 x y 速度 就可以实现 更多创意效果可自行实现 <s...
canvas画数字
chairr的博客
02-17 3526
canvas
canvas笔记-使用canvas画圆及点阵的使用
IT1995的博客
05-27 1723
如下例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: bl
canvas基础3 - 点阵式数据结构练习
许小叮当的博客
06-17 360
本文是canvas基础3 - 点阵式数据结构练习，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
canvas小练习-图片点阵化demo
guo_yue的博客
08-07 2242
###121212
canvas实现粒子时钟效果
08-31
在这个实例中，我们将利用Canvas来创建点阵数字，然后将这些数字动态地转换成显示时间的粒子时钟。 首先，我们提到的“digit.js”是一个包含0到9以及冒号的三维数组，表示每个数字的二维点阵。这个点阵是7行10列的...
用canvas画一个炫酷的粒子动画倒计时
最新发布
小陈的博客
02-28 3126
canvas是HTML5中新增的一个标签，主要是用于网页实时生成图像并可操作图像，它是用JavaScript操作的bitmap。🤨 在JavaScript中定义所需的变量numberStage - stageCenterY 这一块主要是定义画布宽高和坐标countdownFrom 从 10 开始倒计时countdownTimer 数字显示的时长countdownRunning 动起来colors 页面上所有粒子颜色其他的可以自己理解一下哦~
用canvas完成超炫酷的数字时钟
Moriarty的专栏
02-06 3104
这次要完成的是一个很炫酷很炫酷的时钟， 如图   每一次时钟更新都伴随有很多彩色小球落下，很不是很赞啊！O(∩_∩)O~ 这个东西呢，主要用到了两个方面的东西：canvas和js中的Date对象， 涉及到的canvas属性和方法有： Canvas的声明         当前浏览器不支持Canvas，请更换浏览器后再试 设置canvas画布的宽高：   canvas.w
html5 canvas酷炫LED文字切换动画特效
06-11
html5 canvas酷炫LED文字切换动画特效是一款非常酷炫的LED灯光文字幻灯片动画效果，而且文字颜色还会随机变换。
HTML5 Canvas LED 时钟
weixin_33701251的博客
12-14 131
.stage { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc; z-index:0; background:#000; } 源码 //获取到舞台 varcanvas=documen...
led-canvas-led:https 使用的示例 LED 类
07-09
led-canvas-led 使用的示例 LED 类。 例子 var Led = require ( 'led-canvas-led' ) ; /** * Creates an instance of led-canvas-led with coordinates { x: 1, y: 1 } * and a size of 10 and with * @type {Led} */ var led = new Led ( 1 , 1 , 10 ) 最小的界面 Led.constructor /** * Construct a new instance of Led * @param {Integer} x - x coordinate of the new Led * @param {Integer} y - y coordinate of the new Led
html5 canvas制作LED屏幕故障显示动画特效
09-08
html5 canvas制作LED屏幕故障显示动画特效
canvastoE131:此模块可让您通过在画布上绘图来控制 LED 灯
07-11
#画布到 E1.31 此模块可让您通过在画布上绘图来控制灯光。 它主要是为 LED 灯条网格设计的。 您可以通过循环在画布上绘画并使用此模块发送输出来创建动画。 虽然 node-canvas 不是模块的依赖项，但您需要将 node-canvas 的实例传递给该模块。 ＃＃特征 使用你喜欢的图形库绘制到画布上，然后输出到 sAcn (E1.31) 选择画布的不同部分输出到不同的照明设备 默认情况下支持常见的蛇形布线 - 提供以您喜欢的任何方式映射的功能 包括一个全面的测试套件 ##Usage 示例目录中包含许多示例，包括一个简单的动画。 一个非常基本的例子如下： // sendSimple.js var Canvas = require ( "canvas" ) ; var CanvastoE131 = require ( "canvastoe131" ) ; var canvas
自定义view之用Canvas画带动画的环形增长数字
04-21
这是一个自定义view的项目源码，布局就是一个简单的线性布局而已，通过addview的方式，将自定义view显示出来； 用Canvas画一个渐变圆以及外圈圆、外圈小圆，包括外圈圆的增长动画，数字增长动画。
canvas创建文字笔画坐标，绘制和识别
11-02
是一个demo测试。 使用步骤： 1 创建本地的web服务，把文件移动到web服务的根目录。 2 访问createfont.html，F12切换到移动端模式。 2.1 【必要】 先点击创建字模，这时画布会出现方格（可以在源码里改变jg变量的大小），点击方格的不同位置创建笔画。一定要点击，不要拖动。 2.2 【必要】 点击保存笔画。其实保存的点击的坐标位置数组到本地。 2.3 跳转访问writefont.html 2.4 【可选】 输出笔画，可以看到控制台看到保存的坐标。 3 访问writefont.html，F12切换到移动端模式。 3.1 写字 点击后会把本地的坐标位置数据以点的形式显示在画布上，在某点按下，拖动到另外一点，会把这两点链上。如果过某一点不松鼠标也会链上。 3.2 检测 会检测你所链接的点的是完全和本地位置数组是否一致。只有写字笔划与创建的笔划一样时才为正确，顺序可以不一样。 3.3 撤销 撤销笔画 3.4 识别 访问接口，把画布转图片，上传服务器，服务器调用文字识别接口。可以申请百度的文字识别等。 3.5 返回上一页
用Canvas绘制一个数字键盘
知足常乐
11-16 1363
用Canvas轻轻松松搞一个数字键盘，本身没什么难度，这种效果实现的方式也是多种多样，这篇只是其中的一种，要说本篇有什么特别之处，可能就是纯绘制，没有用到其它的任何资源
html页面适应led宽,HTML5 LED（发光二极管）面板
weixin_32484541的博客
06-03 203
JavaScript语言：JaveScriptBabelCoffeeScript确定$(function() {var $pixelGrid = $('#pixel-grid');var pixelGrid = {canvas: null,c2d: null,canvasW: 800,canvasH: 400,bgColor: 'black',pixelColor: '#006cff',numPi...
canvas实现聚光灯效果（js）
wangzhneg123的博客
03-01 1716
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas实现聚光灯效果（js）&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;
使用canvas绘制数字雨
qq_35394917的博客
12-01 878
使用canvas绘制数字雨
HTML5 Canvas绘制圆形时钟步骤解析
本教程将深入讲解如何使用Canvas API创建一个圆形时钟。首先，我们需要了解Canvas的基本结构和一些核心方法。 1. **Canvas元素的设置** 在HTML文件中，创建一个`<canvas>`元素，为其指定ID、宽度和高度。例如： `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值