setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式context.fillStyle=color|gradient|pattern
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc() 方法创建弧/曲线（用于创建圆或部分圆）
参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color: #000">
<canvas id="container" style="display:block;margin: 0 auto;border:solid 1px #fff;" width="1200px" height="700px">您的浏览器不支持canvas属性</canvas>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
js
window.onload=function () {
var canvas=document.getElementById('container');
var context=canvas.getContext("2d");
setInterval(start(context),1000);
}
/*利用无参匿名函数向定时器传参数*/
function start(ctx) {
return function () {
ctx.clearRect(0,0,1200,700);
update(ctx);
}
}
//
//更新时间
function update(ctx) {
var dt = new Date();
var time = [dt.getHours(),dt.getMinutes(),dt.getSeconds()];
var leftNum = [],rightNum = [];
var nextNum = []; //TODO下一个数字
for (var i = 0; i < time.length; i++) { /*将当前的数字分为三个部分 小时 分钟 秒数*/
if(time[i] < 10) {
leftNum[i] = 0;
rightNum[i] = time[i];
} else {
leftNum[i] = parseInt(time[i] / 10);
rightNum[i] = time[i] % 10;
}
if(i == 0) {
nextNum[i] = (leftNum[i] + 1) % 3;
} else {
nextNum[i*2] = (leftNum[i] + 1) % 10;
}
nextNum[i*2 + 1] = (rightNum[i] + 1) % 10;
drawTime(i,leftNum[i],rightNum[i],ctx);
}
for (var i = 0;i < 2;i++) {
drawDots(i,ctx);
}
}
/*绘制当前时间*/
function drawTime(leftbegin,leftNum,rightNum,ctx) {
for (var i=0;i<numbers[leftNum].length;i++){
for (var j=0;j<numbers[leftNum].length;j++){
if (numbers[leftNum][i][j]==1){
ctx.beginPath();
ctx.fillStyle="#FF0000";
ctx.arc(30+412*leftbegin+j*22,100+i*22,10,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
}
}
for (var i = 0; i < numbers[rightNum].length; i++) {
for (var j = 0; j < numbers[rightNum].length; j++) {
if(numbers[rightNum][i][j] == 1) {
ctx.beginPath();
ctx.fillStyle = "#FF0000";
ctx.arc(194+416*leftbegin+j*22,100+i*22,10,0,Math.PI*2,true);
ctx.fill();
// ctx.fillRect(100 + j*20,100 + i*20,20,20);
ctx.closePath();
}
}
}
}
//绘制冒号
function drawDots (leftbeigin,ctx) { /*leftbegin 的值取0 1 */
for (var i = 0; i < numbers[10].length; i++) { /*10*/
for (var j = 0; j < numbers[10][0].length; j++) { /*4*/
if(numbers[10][i][j] == 1) {
ctx.beginPath(); /*beginPath() 方法开始一条路径，或重置当前的路径*/
ctx.fillStyle = "#eee";/*fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
ctx.arc(346+leftbeigin*414+j*22,100+i*22,10,0,Math.PI*2,true);
ctx.fill();/*fill() 方法填充当前的图像（路径）*/
// ctx.fillRect(100 + j*20,100 + i*20,20,20);
ctx.closePath(); /*closePath() 方法创建从当前点到开始点的路径*/
}
}
}
}
//存取颜色数组
var colors = ['#00FF00','#006EFF','#E66EFF','#FF6E00','#FFFF00','#C8F4FA','#9664FA','#FEC783'];
//存取数据数组
var numbers = [
[
[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,1,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]
]//:10
];
浙公网安备 33010602011771号