canvas时钟特效(原创)

Html

Css

#mycanvas {
	display:block;
	margin:50px auto;
	border:1px solid black;
}

let canvas = document.querySelector('#mycanvas');
let context = canvas.getContext('2d');

function timer() {

context.beginPath();
    context.arc(250, 250, 200, 0, Math.PI * 2, false);
    context.closePath();
    context.lineWidth = 8;
    context.stroke();
    //分钟点
    for (let i = 0; i < 60; i++) {
        context.save();
        context.translate(250, 250);
        context.rotate(Math.PI / 180 * i * 6);
        context.beginPath();
        context.moveTo(0, -175);
        context.lineTo(0, -190);
        context.closePath();
        context.lineWidth = 4;
        context.stroke();
        context.restore();
    }
    //时刻点
    for (let i = 0; i < 60; i++) {
        context.save();
        context.translate(250, 250);
        context.rotate(Math.PI / 180 * i * 30);
        context.beginPath();
        context.moveTo(0, -175);
        context.lineTo(0, -190);
        context.closePath();
        context.lineWidth = 6;
        context.stroke();
        context.restore();
    }
    let nowtime = new Date();
    let h = nowtime.getHours();
    let m = nowtime.getMinutes();
    let s = nowtime.getSeconds();
    h = h + (m / 60);
    h = h > 12 ? h - 12 : h;
    //时针
    context.save();
    context.translate(255, 255);
    context.lineWidth = 6;
    context.rotate(Math.PI / 180 * h * 30);
    context.beginPath();
    context.moveTo(0, -5);
    context.lineTo(0, -160);
    context.closePath();
    context.stroke();
    context.restore();
    //分针
    context.save();
    context.translate(255, 255);
    context.lineWidth = 4;
    context.rotate(Math.PI / 180 * m * 6);
    context.beginPath();
    context.moveTo(0, -5);
    context.lineTo(0, -160);
    context.closePath();
    context.stroke();
    context.restore();
    //秒钟
    context.save();
    context.translate(255, 255);
    context.lineWidth = 2;
    context.rotate(Math.PI / 180 * s * 6);
    context.beginPath();
    context.moveTo(0, -5);
    context.lineTo(0, -160);
    context.closePath();
    context.stroke();
    context.restore();
}
timer();
setInterval(function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    timer()
}, 1000)

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

立即下载

canvas时钟特效(原创)

代码描述：利用canvas实现时钟特效代码

更新时间：2020-09-19 23:56:02

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

淡然

相关代码

canvas时钟特效(原创)

最新