canvas绘制动态电子表
程序员文章站
2024-01-15 19:32:34
...
电子表在线地址:点击打开链接
电子时钟截图
动态电子表实现思路
1.利用数组绘制不规则图形需要绘制的图形有 0 1 2 3 4 5 6 7 8 9 :
要绘制的图形数组为[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],
故需要一个三维数组,也即11个七列十行的二维数组
2.借助 canvas 绘制
2.1把三维数组里面的1转换为小圆点(arc)
2.2确立绘制圆点坐标半径.设小圆的半径为R,这直径为2R,每个小圆的边距为1
则有一个数字所占宽为7*(2R+2),高为10*(2R+2)
2.3时间格式为00:00:00,令R==4,让每个数字之间距离为15,那么画布宽为8*100=800,高为100
2.4确定第一个图形数组内(i,j)的圆心坐标为((2j+1)*(R+1),(2i+1)*(R+1))
第n个图形的圆点坐标为(100*index+x,y),x,y为上述圆心坐标
2.5画出圆形context.arc(100*index+(2j+1)*(R+1),(2i+1)*(R+1),R,2*Math.PI,false)
3.获取时间
1.时间对象Date获取当前时间,并通过正则取出每个数字
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子时钟</title>
<style type="text/css">
body{margin:0;padding:0;}
#canvas{display:block;
margin:300px auto 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="100"></canvas>
<script type="text/javascript">
var num=
[
[
[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,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,0,0,0]
]//:
];
</script>
<script type="text/javascript">
var draw=document.getElementById('canvas');
var context=draw.getContext('2d');
function drawNum(index,n){
for(var i=0;i<num[n].length;i++){
for(var j=0;j<num[n][i].length;j++){
if(num[n][i][j]=='1'){
context.beginPath();
context.fillStyle="#5c1414";
context.arc(index*100+j*2*(4+1)+(4+1),i*2*(4+1)+(4+1),4,2*Math.PI,false);
context.closePath();
context.fill();//填充*/
}
}
}
}
function getTime(){
var temp=/(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date);
var data=[];
data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
for(var i=0;i<data.length;i++){
drawNum(i,data[i]);
}
}
getTime();
setInterval(function(){
context.clearRect(0,0,800,100);
getTime();
},1000)
</script>
</body>
</html>上一篇： python matplotlib库学习