canvas时钟

Html

Css

var clock = document.getElementById('clock');
var cxt = clock.getContext('2d'); //设置2d

function dranClock() {

cxt.clearRect(0, 0, 500, 500)
    //获取时间
    var now = new Date();
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hour = now.getHours();
    //小时要获取浮点类型
    //将24小时转换为12小时
    hour = hour + min / 60;
    hour = hour > 12 ? hour - 12 : hour;

//表盘（蓝色）
    cxt.lineWidth = 10;
    cxt.strokeStyle = "blue";
    cxt.beginPath()
    cxt.arc(250, 250, 200, 0, 360, false);
    cxt.closePath();
    cxt.stroke();
    //刻度
    //时刻度
    for (var i = 0; i < 12; i++) {
        cxt.save();
        //设置时针的粗细和颜色
        cxt, lineWidth = 7;
        cxt.strokeStyle = "#000";
        //设置00 点
        cxt.translate(250, 250)
        //设置旋转角度
        cxt.rotate(i * 30 * Math.PI / 180);
        cxt.beginPath();
        cxt.moveTo(0, -170);
        cxt.lineTo(0, -190);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }
    //分刻度
    for (var i = 0; i < 60; i++) {
        cxt.save();
        //设置分针的粗细和颜色
        cxt, lineWidth = 1;
        cxt.strokeStyle = "#000";
        //设置00 点
        cxt.translate(250, 250)
        //设置旋转角度
        cxt.rotate(i * 6 * Math.PI / 180);
        cxt.beginPath();
        cxt.moveTo(0, -180);
        cxt.lineTo(0, -190);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }

//时针
    //设置时针风格
    cxt.save();
    cxt.lineWidth = 7;
    //设置时针的颜色
    cxt.strokeStyle = "#000";
    //设置00 点
    cxt.translate(250, 250)
    //设置旋转角度
    cxt.rotate(hour * 30 * Math.PI / 180);
    cxt.beginPath();
    cxt.moveTo(0, -120);
    cxt.lineTo(0, 10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //分针
    //设置分针风格
    cxt.save();
    cxt.lineWidth = 5;
    //设置分针的颜色
    cxt.strokeStyle = "#000";
    //设置00 点
    cxt.translate(250, 250)
    //设置旋转角度
    cxt.rotate(min * 6 * Math.PI / 180);
    cxt.beginPath();
    cxt.moveTo(0, -140);
    cxt.lineTo(0, 10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //秒针
    //设置秒针风格
    cxt.save();
    cxt.lineWidth = 3;
    //设置秒针的颜色
    cxt.strokeStyle = "red";
    //设置00 点
    cxt.translate(250, 250)
    //设置旋转角度
    cxt.rotate(sec * 6 * Math.PI / 180);
    cxt.beginPath();
    cxt.moveTo(0, -160);
    cxt.lineTo(0, 10);
    cxt.closePath();
    cxt.stroke();
    //话出时针分针秒针交叉点
    cxt.beginPath();
    cxt.arc(0, 0, 5, 0, 360, false);
    cxt.closePath();
    cxt.fillStyle = "#ccc";
    cxt.fill();
    //设置笔触样式
    cxt.stroke();
    //设置秒针前端的小圆点
    cxt.beginPath();
    cxt.arc(0, -120, 5, 0, 360, false);
    cxt.closePath();
    cxt.fillStyle = "#ccc";
    cxt.fill();
    //设置笔触样式
    cxt.stroke();
    cxt.restore();

}
//刷新时会有一秒空白，先调用一次函数
dranClock();
//使用计时器
setInterval(dranClock, 1000)

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

立即下载

canvas时钟



代码描述：一款用canvas加js写的代码

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

GentleMan

相关代码

canvas时钟

最新