原生态的js， 利用H5 Canvas 写的旋转小伞 时钟
指针和表盘会变颜色哦！指针到达小伞位置，会跟四周的小伞颜色一致！
H5 Canvas 旋转小伞 时钟
效果如下：
JavaScript代码：
代码语言：javascript复制<script type="text/javascript" language="javascript">
window.onload=function () {
// 创建画布
var canvas=document.createElement('canvas');
var brush=canvas.getContext("2d");
canvas.style.border="2px solid #aaaaaa";
canvas.width=700;
canvas.height=700;
// 包裹画布居中
var box=document.createElement('div');
// box样式
box.style.width=canvas.width "px";
box.style.height=canvas.height "px";
box.style.margin="100px auto";
// 移动块
var move=document.createElement('span');
// move样式
move.style.color="#ff0000";
move.style.position="absolute";
move.style.display="none";
move.style.boxShadow="1px 1px 8px red";
// 添加对象
document.body.appendChild(box);
document.body.appendChild(move);
box.appendChild(canvas);
// 避免重复获取画布大小
var x=canvas.offsetLeft;
var y=canvas.offsetTop;
move.style.display="none";
function mymove (event) {
move.style.display="block";
move.style.left=event.clientX-50 "px";
move.style.top=event.clientY-50 "px";
move.innerHTML="当前画布坐标：" (event.clientX-x-2) "," (event.clientY-y-2);
}
function myout () {
move.style.display="none";
}
canvas.onmousemove=mymove;
canvas.onmouseout=myout;
// ---------------------------伞-------------------------------
// var mycolor=["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#871F78"];
var mycolor=["#8cc540","#009f5d","#019fa0","#019fde","#007cdc","#887ddd","#cd7bdd","#ff5675",
"#ff1244","#ff8345","#f8bd0b","#d1d2d4"];
brush.translate(350,350);
var i=0;
function ful () {
brush.save();
brush.rotate(Math.PI/180*(360/12*i))
// 伞帽子
brush.beginPath();
brush.fillStyle=mycolor[i];
brush.arc(0,-290,40,0,Math.PI,true);
brush.fill();
// 伞柄
brush.beginPath();
brush.lineWidth=2;
brush.lineCap="round";
brush.strokeStyle=mycolor[i];
brush.moveTo(0,-290);
brush.lineTo(0,-240);
brush.arc(-10,-240,10,0,Math.PI,false);
brush.stroke();
brush.restore();
i ;
if (i==mycolor.length) {
clearInterval(timer_ful);
}
}
var timer_ful=setInterval(ful,500);
// ---------------------------时钟-------------------------------
var grd=brush.createRadialGradient(0,0,1,0,0,12);
var mydeg=Math.PI/180;
function bell() {
var mytime=new Date();//获取时间对象
var h=mytime.getHours();//时钟
var m=mytime.getMinutes();//分钟
var s=mytime.getSeconds();//秒钟
// console.log(h ":" m ":" s);
h=h>12?h-12:h;//24小时制转换
brush.clearRect(-180,-180,360,360);//清除
brush.save();//保存环境
// 表盘
brush.beginPath();
brush.strokeStyle=mycolor[parseInt(s/5)];
brush.lineWidth=10;
brush.arc(0,0,170,0,Math.PI*2);
brush.stroke();
// 刻度
for (var i=0;i<60;i ) {
brush.rotate(mydeg*6);
brush.beginPath();
brush.lineCap="round";
brush.lineWidth=5;
brush.moveTo(0,-165);
brush.lineTo(0,-155);
brush.stroke();
}
for (var i=0;i<12;i ) {
brush.rotate(mydeg*30);
brush.beginPath();
brush.lineCap="round";
brush.lineWidth=10;
brush.moveTo(0,-165);
brush.lineTo(0,-145);
brush.stroke();
}
for (var i=0;i<12;i ) {
var myfont=i 1;
brush.rotate(mydeg*30);
brush.beginPath();
brush.fillStyle=mycolor[i];
brush.font="15px 楷体";
brush.fillText(myfont,-7,-120);
}
// 时
brush.save();
brush.rotate(mydeg*h*30);
brush.strokeStyle=mycolor[h];
brush.lineWidth=6;
brush.beginPath();
brush.moveTo(0,20);
brush.lineTo(0,-80);
brush.stroke();
brush.restore();
// 秒
brush.save();
brush.rotate(mydeg*s*6);
brush.strokeStyle=mycolor[parseInt(s/5)];
brush.lineWidth=3;
brush.beginPath();
brush.moveTo(0,20);
brush.lineTo(0,-130);
brush.stroke();
brush.restore();
// 分
brush.save();
brush.rotate(mydeg*m*6);
brush.strokeStyle=mycolor[parseInt(m/5)];
brush.lineWidth=5;
brush.beginPath();
brush.moveTo(0,20);
brush.lineTo(0,-100);
brush.stroke();
brush.restore();
// 表芯
brush.beginPath();
grd.addColorStop(0,"#ffffff");
grd.addColorStop(1,"#ff0000");
brush.fillStyle=grd;
brush.arc(0,0,12,0,Math.PI*2);
brush.fill();
}
bell();
var timer_bell=setInterval(bell,1000);
}
</script>
