您的位置：首页 > 其它

使用CANVAS绘制LED点阵时钟

2015-02-22 11:08 549 查看


核心内容：

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
);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas
相关文章推荐
新的分享
章节导航