canvas绘制时钟代码

Html

Css

* {
	margin:0;
	padding:0;
}
div {
	text-align:center;
	margin:50px auto 0;
}
#clock {
	border:1px solid #ccc;
}

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
//rem 缩放或放大比例
var rem = width / 200;

function drawBackground() {
    ctx.save();
    //画外面的大圆
    ctx.translate(r, r);
    ctx.beginPath();
    ctx.lineWidth = 10 * rem;
    ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI);
    ctx.stroke();
    //画时针数
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    hourNumbers.forEach(function(number, i) {
        //rad弧度
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30 * rem);
        var y = Math.sin(rad) * (r - 30 * rem);
        ctx.font = 18 * rem + "px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(number, x, y);
    })

//画秒针点
    for (var i = 0; i < 60; i++) {
        //rad弧度
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18 * rem);
        var y = Math.sin(rad) * (r - 18 * rem);
        ctx.beginPath();
        if (i % 5 == 0) {
            ctx.fillStyle = "#000";
            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
        } else {
            ctx.fillStyle = "#ccc";
            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
        }
        ctx.fill()
    }
}

//画时针
function drawHour(hour, minute) {
    ctx.save();
    ctx.beginPath();
    //rad弧度
    var rad = 2 * Math.PI / 12 * hour;
    //mrad分钟引起的弧度
    var mrad = 2 * Math.PI / 12 / 60 * minute;
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 6 * rem;
    ctx.lineCap = "round";
    ctx.moveTo(0, 10 * rem);
    ctx.lineTo(0, -r / 2);
    ctx.stroke();
    ctx.restore();
}
//画分针
function drawMinute(minute) {
    ctx.save();
    ctx.beginPath();
    //rad弧度
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3 * rem;
    ctx.lineCap = "round";
    ctx.moveTo(0, 10 * rem);
    ctx.lineTo(0, -r + 30 * rem);
    ctx.stroke();
    ctx.restore();
}
//画秒针
function drawSecond(second) {
    ctx.save();
    ctx.beginPath();
    //rad弧度
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.fillStyle = '#c14543';
    ctx.moveTo(-2 * rem, 20 * rem);
    ctx.lineTo(2 * rem, 20 * rem);
    ctx.lineTo(1, -r + 18 * rem);
    ctx.lineTo(-1, -r + 18 * rem);
    ctx.fill();
    ctx.restore();
}

// 画中间的点
function drawDot() {
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false);
    ctx.fill();
}

function draw() {
    ctx.clearRect(0, 0, width, height)
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour, minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore();
}

setInterval(draw, 1000)

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

立即下载

canvas绘制时钟代码



代码描述：canvas绘制时钟，修改canvas大小，时钟可自适应

更新时间：2021-09-03 01:38:07

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yellow kid

相关代码

canvas绘制时钟代码

最新