How to draw a clock on canvas_html5 tutorial skills

This article mainly introduces relevant information on how to draw clocks on canvas in HTML5. The editor feels that HTML is really becoming more and more powerful, so I will share it with you now and give it as a reference. Friends who are familiar with HTML can follow the editor to take a look.

This article introduces how to draw a clock on canvas and shares it with you. The details are as follows:

The rendering is

Above code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var year,month,day,hour,second,minute;
// 绘制表盘
function drawClockPie(){
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#333';
    ctx.arc(150,150,146,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(150,150,6,0,2*Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
}

// 绘制时刻度
function drawClockHours(){
    for(var i = 0,l = 12; i < 12; i++){
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(i*1/12*2*Math.PI);
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = &#39;#333&#39;;
        ctx.moveTo(0,-140);
        ctx.lineTo(0,-125);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

// 绘制分刻度
function drawClockMins(){
    for(var i = 0,l = 60; i < 60; i++){
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(i*1/60*2*Math.PI);
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = &#39;#333&#39;;
        ctx.moveTo(0,-140);
        ctx.lineTo(0,-133);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

// 绘制时针
function drawHourPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate((hour*60*60+minute*60+second)/(12*60*60)*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = &#39;#333&#39;;
    ctx.lineWidth = 3;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-40);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制分针
function drawMinPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate((minute*60+second)/(60*60)*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = &#39;#333&#39;;
    ctx.lineWidth = 2;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-60);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制秒针
function drawSecPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate(second/60*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = &#39;red&#39;;
    ctx.lineWidth = 1;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-80);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制时间文字
function drawText(){
    hour = hour >= 12 ? hour - 12 : hour;
    var time = &#39;现在是&#39; + year + &#39;年&#39; + month +
    &#39;月&#39; + day + &#39;日&#39; + hour + &#39;时&#39; + minute +
    &#39;分&#39; + second + &#39;秒&#39;;
    ctx.font = &#39;15px 黑体&#39;;
    ctx.fillText(time,24,350);
}

// 获取时间
function getTimes(){
    var date = new Date();
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hour = date.getHours();
    minute = date.getMinutes();
    second = date.getSeconds();
}
setInterval(function(){
    ctx.clearRect(0,0,600,600);
    drawClockPie();
    drawClockHours();
    drawClockMins();
    getTimes();
    drawText();
    drawHourPin();
    drawMinPin();
    drawSecPin();
},1000);

Note:

Of course, the time does not need to be obtained every second, but can be obtained directly and incremented by seconds.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

Related recommendations:

JS, canvas drawing a cone implementation code

JavaScript html5 canvas implements drawing hyperlinks on pictures

Realizes subway station monitoring based on HTML5 Canvas

The above is the detailed content of How to draw a clock on canvas_html5 tutorial skills. For more information, please follow other related articles on the PHP Chinese website!