时钟标签canvas

PROMULGATOR

1422425666

北京市

← 获取昨天，今天，明天的日期

→ jQuery实现手风琴效果

相关代码

canvas炫酷时钟

动态美观圆形时钟

css3时钟动画

canvas时钟效果

canvas时钟效果

canvas点阵时钟

Html

Css

Js

body {
	margin:0;
}

window.onload = draw;

function draw() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.save(); ///////////////////////////////////保存
    context.translate(200, 200);
    var deg = 2 * Math.PI / 12;
    //////////////////////////////////////////////////表盘
    context.save();
    context.beginPath();
    for (var i = 0; i < 13; i++) {
        var x = Math.sin(i * deg);
        var y = -Math.cos(i * deg);
        context.lineTo(x * 150, y * 150);
    }
    var c = context.createRadialGradient(0, 0, 0, 0, 0, 130);
    c.addColorStop(0, "#22f");
    c.addColorStop(1, "#0ef")
    context.fillStyle = c;
    context.fill();
    context.closePath();
    context.restore();
    //////////////////////////////////////////////////数字
    context.save();
    context.beginPath();
    for (var i = 1; i < 13; i++) {
        var x1 = Math.sin(i * deg);
        var y1 = -Math.cos(i * deg);
        context.fillStyle = "#fff";
        context.font = "bold 20px Calibri";
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.fillText(i, x1 * 120, y1 * 120);
    }
    context.closePath();
    context.restore();
    //////////////////////////////////////////////////大刻度
    context.save();
    context.beginPath();
    for (var i = 0; i < 12; i++) {
        var x2 = Math.sin(i * deg);
        var y2 = -Math.cos(i * deg);
        context.moveTo(x2 * 148, y2 * 148);
        context.lineTo(x2 * 135, y2 * 135);
    }
    context.strokeStyle = '#fff';
    context.lineWidth = 4;
    context.stroke();
    context.closePath();
    context.restore();
    //////////////////////////////////////////////////小刻度
    context.save();
    var deg1 = 2 * Math.PI / 60;
    context.beginPath();
    for (var i = 0; i < 60; i++) {
        var x2 = Math.sin(i * deg1);
        var y2 = -Math.cos(i * deg1);
        context.moveTo(x2 * 146, y2 * 146);
        context.lineTo(x2 * 140, y2 * 140);
    }
    context.strokeStyle = '#fff';
    context.lineWidth = 2;
    context.stroke();
    context.closePath();
    context.restore();
    ///////////////////////////////////////////////////文字
    context.save();
    context.strokeStyle = "#fff";
    context.font = ' 34px sans-serif';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.strokeText('canvas', 0, 65);
    context.restore();
    /////////////////////////////////////////////////new Date
    var time = new Date();
    var h = (time.getHours() % 12) * 2 * Math.PI / 12;
    var m = time.getMinutes() * 2 * Math.PI / 60;
    var s = time.getSeconds() * 2 * Math.PI / 60; ////////////////////////////////////////////时针
    context.save();
    context.rotate(h + m / 12 + s / 720);
    context.beginPath();
    context.moveTo(0, 6);
    context.lineTo(0, -85);
    context.strokeStyle = "#fff";
    context.lineWidth = 6;
    context.stroke();
    context.closePath();
    context.restore();
    //////////////////////////////////////////////分针
    context.save();
    context.rotate(m + s / 60);
    context.beginPath();
    context.moveTo(0, 8);
    context.lineTo(0, -105);
    context.strokeStyle = "#fff";
    context.lineWidth = 4;
    context.stroke();
    context.closePath();
    context.restore();
    /////////////////////////////////////////////秒针
    context.save();
    context.rotate(s);
    context.beginPath();
    context.moveTo(0, 10);
    context.lineTo(0, -120);
    context.strokeStyle = "#fff";
    context.lineWidth = 2;
    context.stroke();
    context.closePath();
    context.restore();
    context.restore(); /////////////////////////////栈出
}
setInterval(draw, 1000); /////////////////////////////计时器</p> <p>}</p> <p>

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

立即下载

时钟标签canvas

代码描述：漂亮的html5 canvas时钟

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>时钟标签canvas-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号