HTML5个性圆弧时钟动画特效源码

HTML5个性圆弧时钟动画特效是一款html5基于canvas绘制酷炫发光的圆弧线条走动时钟动画特效

效果：

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5个性圆弧时钟动画特效</title>
<style>
body {
background-color:black;
}
</style>
</head>
<body>
<center><canvas id="canvas" width="500" height="500" >cccc</canvas></center>
<script>
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);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

会飞的鱼

HTML5个性圆弧时钟动画特效源码

admin

相关推荐

取消回复发表评论

网友评论（0）