canvas时钟效果

Html

Css

body,html {
	margin:0;
	padding:0;
}
canvas {
	display:block;
	margin:20px auto;
	border:1px dashed #999;
}

var dom = document.getElementById("can");
var can = dom.getContext("2d");

can.translate(250, 250);
can.save();
setInterval(clock, 1000);

//			clock();

function clock() {
    var nowDate = new Date();
    var dayH = nowDate.getHours();
    var dayM = nowDate.getMinutes();
    var dayS = nowDate.getSeconds();

can.clearRect(-250, -250, dom.width, dom.height);

can.restore();
    can.save();

clockPlane(); //画表盘
    scale(); //画刻度

hour(dayH, dayM, dayS); //画时针
    minute(dayM); //画分针
    second(dayS); //画秒针
    dot();

}

//画表盘
function clockPlane() {
    can.beginPath(); //每次画组件另起一行,以确保组件之间不会相互干扰
    can.strokeStyle = "#0c9fe3";
    can.lineWidth = 15;
    can.arc(0, 0, 165, 0, 2 * Math.PI);
    can.closePath(); //封闭路径
    can.stroke();
}

//画刻度
function scale() {
    can.save(); //保存画布初始状态
    can.beginPath();
    can.strokeStyle = "#000";
    can.lineWidth = 5;

//画分刻度
    for (var i = 0; i < 60; i++) {

can.rotate(-(2 / 60) * Math.PI);
        can.moveTo(0, 140);
        can.lineTo(0, 150);
        can.stroke();
    }

//画时刻度
    for (var i = 0; i < 12; i++) {
        can.lineWidth = 5;
        can.rotate(-(2 / 12) * Math.PI);
        can.moveTo(0, 130);
        can.lineTo(0, 150);
        can.stroke();
    }
}

//画时针
function hour(h, m, s) {

var ds = 12 * 60 * 60; //时针旋转基数
    var ns = h * 60 * 60 + m * 60 + s; //通过时分秒来计算总共有多少秒

can.beginPath(); //新建图层
    can.restore(); //将画布恢复成初始状态
    can.save(); //保存初始状态
    can.strokeStyle = "#000";
    can.rotate((2 / ds) * ns * Math.PI);
    can.lineWidth = 7;
    can.moveTo(0, 20);
    can.lineTo(0, -70);
    can.stroke();
}

//画分针
function minute(m) {
    can.restore(); //恢复画布成初始状态
    can.save(); //保存画布初始状态
    can.beginPath(); //新建图层
    can.strokeStyle = "#000";
    can.rotate((2 / 60) * m * Math.PI);
    can.lineWidth = 3;
    can.moveTo(0, 25);
    can.lineTo(0, -100);
    can.stroke();
}

//画秒针
function second(s) {
    can.restore(); //恢复画布初始状态
    can.save(); //保存画布初始状态
    can.beginPath(); //新建图层
    can.rotate((2 / 60) * s * Math.PI);
    can.lineWidth = 1;
    can.strokeStyle = "#f00";
    can.moveTo(0, 30);
    can.lineTo(0, -120);
    can.stroke();
}

//画点
function dot() {
    can.beginPath();
    can.fillStyle = "#f00";
    can.arc(0, 0, 4, 0, 2 * Math.PI);
    can.closePath();
    can.fill();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas时钟效果



代码描述：canvas时钟效果,注释全

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

怦然心动

相关代码

canvas时钟效果

最新