html弧形列表效果,利用HTML5实现个性圆弧时钟动画特效

特效描述：利用HTML5实现 个性圆弧时钟 动画特效。利用HTML实现个性圆弧时钟动画特效

代码结构

1. HTML代码

cccc

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.strokeStyle = '#00ffff';

ctx.lineWidth = 17;

ctx.shadowBlur = 15;

ctx.shadowColor = '#00ffff'

function degToRad(degree) {

var factor = Math.PI / 180;

return degree * factor;

}

function renderTime() {

var now = new Date();

var today = now.toDateString();

var time = now.toLocaleTimeString();

var hrs = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

var mil = now.getMilliseconds();

var smoothsec = sec + (mil / 1000);

var smoothmin = min + (smoothsec / 60);

//Background

gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);

gradient.addColorStop(0, "#03303a");

gradient.addColorStop(1, "black");

ctx.fillStyle = gradient;

//ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';

ctx.fillRect(0, 0, 500, 500);

//Hours

ctx.beginPath();

ctx.arc(250, 250, 200, degToRad(270), degToRad((hrs * 30) - 90));

ctx.stroke();

//Minutes

ctx.beginPath();

ctx.arc(250, 250, 170, degToRad(270), degToRad((smoothmin * 6) - 90));

ctx.stroke();

//Seconds

ctx.beginPath();

ctx.arc(250, 250, 140, degToRad(270), degToRad((smoothsec * 6) - 90));

ctx.stroke();

//Date

ctx.font = "25px Helvetica";

ctx.fillStyle = 'rgba(00, 255, 255, 1)'

ctx.fillText(today, 175, 250);

//Time

ctx.font = "25px Helvetica Bold";

ctx.fillStyle = 'rgba(00, 255, 255, 1)';

ctx.fillText(time + ":" + mil, 175, 280);

}

setInterval(renderTime, 40);