canvas系列(二)canvas绘制电子钟
2017-02-07 本文已影响0人
落花夕拾
本系列是对canvas（一）的实际运用
首先来回顾下上节的相关知识：
beginPath()
closePath()
moveTo()
lineTo()
fill()
stroke()
fillRect()
arc（x，y，radius，startAngle,endAngle,anticlockwise）
清除绘制
clearRect()
接下来我们来绘制一个电子时钟：
效果图：
电子时钟.png
思路：
第一步：我们要创建个二维数组放置我们从0-9的点阵图形，当元素的值为1的时候，就要将其绘制出来；当元素的值为0时，则不进行绘制。而我们 要做的就是将 0 － 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]]//1
第二步： 画个小圆
首先我们来分析，每个小圆的圆心位置：图片来源于（慕课网--侵删）
Screenshot_2016-10-22-22-28-09.png
//首先来绘制简单的数字
function drawNum(x,y,num,ctx){
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){
ctx.beginPath();
ctx.arc(x+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2)
ctx.closePath();
ctx.fillStyle="aqua";
ctx.fill();
}
}
}
}
第三步：绘制时钟
// 我们需要定义一个函数draw()来绘制我们的电子时钟。
function draw(context){
context.clearRect(0,0,1400,1200);
var currentDate =new Date();//获取当前时间
var getHours =currentDate.getHours();//获取当前的时
var getMin =currentDate.getMinutes();//获取当前的分
var getSeconds=currentDate.getSeconds();//获取当前的秒
drawNum(Margin_X,Margin_Y,parseInt(getHours/10),context);//获取hours的十位
drawNum(Margin_X+(RADIUS+1)*15,Margin_Y,parseInt(getHours%10),context);//个位
drawNum(Margin_X+(RADIUS+1)*30,Margin_Y,10,context);//中间冒号
drawNum(Margin_X+(RADIUS+1)*45,Margin_Y,parseInt(getMin/10),context);
drawNum(Margin_X+(RADIUS+1)*60,Margin_Y,parseInt(getMin%10),context);
drawNum(Margin_X+(RADIUS+1)*75,Margin_Y,10,context);
drawNum(Margin_X+(RADIUS+1)*90,Margin_Y,parseInt(getSeconds/10),context);
drawNum(Margin_X+(RADIUS+1)*105,Margin_Y,parseInt(getSeconds%10),context);
}
最后：设置一个定时器，让时钟动起来
setInterval(function(){
draw(context);
},1000);
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1400" height="1200" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script type="text/javascript" src="js/digital.js" ></script>
<script>
var RADIUS = 4; // 圆的半径
var Margin_X = 30; // 离 canvas 原点的坐标值 x
var Margin_Y = 30; // 离 canvas 原点的坐标值 y
// drawNum(0, 0, 1, context);
window.onload=function(){
var canvas =document.getElementById('canvas');
var context=canvas.getContext("2d");
//1、 drawNum(0, 0, 1, context); //首先绘制一个小圆，并填充
setInterval(function(){
draw(context);
},1000);
}
// draw(context);
//2、可以先把时间全部 数字化表示：housr=12，min=34，seconds=45
// 我们需要定义一个函数draw()来绘制我们的电子时钟。
function draw(context){
context.clearRect(0,0,1400,1200);
var currentDate =new Date();//获取当前时间
var getHours =currentDate.getHours();//获取当前的时
var getMin =currentDate.getMinutes();//获取当前的分
var getSeconds=currentDate.getSeconds();//获取当前的秒
drawNum(Margin_X,Margin_Y,parseInt(getHours/10),context);//获取hours的十位
drawNum(Margin_X+(RADIUS+1)*15,Margin_Y,parseInt(getHours%10),context);//个位
drawNum(Margin_X+(RADIUS+1)*30,Margin_Y,10,context);//中间冒号
drawNum(Margin_X+(RADIUS+1)*45,Margin_Y,parseInt(getMin/10),context);
drawNum(Margin_X+(RADIUS+1)*60,Margin_Y,parseInt(getMin%10),context);
drawNum(Margin_X+(RADIUS+1)*75,Margin_Y,10,context);
drawNum(Margin_X+(RADIUS+1)*90,Margin_Y,parseInt(getSeconds/10),context);
drawNum(Margin_X+(RADIUS+1)*105,Margin_Y,parseInt(getSeconds%10),context);
}
//首先来绘制简单的数字
function drawNum(x,y,num,ctx){
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){
ctx.beginPath();
ctx.arc(x+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2)
ctx.closePath();
ctx.fillStyle="aqua";
ctx.fill();
}
}
}
}
</script>
</body>
</html>
点阵代码：
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]
]//:
];
效果图：
电子时钟.png
