canvas绘制钟表
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锤子钟表</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{ background:#a1a1a1;}
.canvas_box{ position:fixed; left:50%; margin-left:-200px; top:50%; margin-top:-200px;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
var width=10;
var w= Math.round(Math.random()*width);
</script>
</head>
<body>
<div class="canvas_box"><canvas id="canvas" width="400" height="400"></canvas></div>
<script>
var num=0;
window.onload=Close;
function Close()
{
var deg=2*Math.PI/12;
var canvas = document.getElementById('canvas');
var ctx=canvas.getContext("2d");
ctx.save();
ctx.fillStyle="#a1a1a1";
ctx.fillRect(0,0,400,400);
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(400,10);
ctx.lineTo(400,200);
ctx.lineTo(10,200);
ctx.closePath();
var x=20;
var y=20;
var w=360;
var h=360;
var r=100;
//圆角矩形
ctx.save();
ctx.save();
ctx.shadowBlur=5;
ctx.shadowColor="#656565";
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=4;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
var f_jb=ctx.createRadialGradient(200,200,0,200,200,200);
f_jb.addColorStop("0.5","#ffffff");
f_jb.addColorStop("1","#ededed");
ctx.strokeStyle="#f8f8f8";
ctx.closePath();
ctx.fillStyle=f_jb;
ctx.stroke();
ctx.fill();
ctx.restore();
//内阴影
ctx.shadowBlur=8;
ctx.shadowColor="#414141";
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=-6;
ctx.beginPath();
ctx.moveTo(w+x,h-r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.lineWidth=1;
var x_jb=ctx.createLinearGradient(0,300,0,360);
x_jb.addColorStop("0","#c3b3b3");
x_jb.addColorStop("1","#f2f2f2");
ctx.strokeStyle=x_jb;
ctx.lineCap="round";
ctx.stroke();
//表圆
ctx.shadowBlur=10;
ctx.shadowColor="#8f8f8f";
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
ctx.strokeStyle="#ffffff";
var yjb=ctx.createLinearGradient(0,0,0,150);
yjb.addColorStop("0","#636363");
yjb.addColorStop("1.0","#414141");
ctx.beginPath();
ctx.arc(200,200,150,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle=yjb;
ctx.fill();
ctx.closePath();
//圆内阴影
ctx.globalAlpha=0.1;
var yjb=ctx.createRadialGradient(200,200,0,200,200,200);
yjb.addColorStop("0","#ffffff");
yjb.addColorStop("1.0","#000000");
ctx.beginPath();
ctx.arc(200,200,150,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle=yjb;
ctx.fill();
ctx.closePath();
ctx.globalAlpha=1;
//数字
ctx.translate(200,200);
ctx.beginPath();
for(var i=1;i<13;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
ctx.fillStyle="#fff";
ctx.font="bold 20px Calibri";
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillText(i,x1*130,y1*130);
}
ctx.restore();
//转针开始
ctx.strokeStyle="#f8f8f8";
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60;
ms=2*Math.PI*(5/4);
//alert(time.getHours());
//时针
x=-10;
y=-10;
w=20;
h=80;
r=10;
//h + m/12 + s/720
ctx.translate(200,200);
ctx.save();
ctx.rotate(h + m/12 + s/720);
ctx.shadowBlur=5;
ctx.shadowColor="#313131";
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.stroke();
ctx.closePath();
var yjb=ctx.createLinearGradient(-4,0,5,0);
yjb.addColorStop("0","dfdfdf");
yjb.addColorStop("0.6","#f0f0f0");
yjb.addColorStop("1.0","#ffffff");
ctx.fillStyle=yjb;
ctx.fill();
ctx.restore();
////分针
x=-10;
y=-100;
w=20;
h=100;
r=10;
//ctx.translate(200,200);m+s/60
ctx.save();
ctx.rotate(m+s/60);
ctx.shadowBlur=5;
ctx.shadowColor="#313131";
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.stroke();
ctx.closePath();
var yjb=ctx.createLinearGradient(-4,0,5,0);
yjb.addColorStop("0","dfdfdf");
yjb.addColorStop("0.6","#f0f0f0");
yjb.addColorStop("1.0","#ffffff");
ctx.fillStyle=yjb;
ctx.fill();
ctx.restore();
//针上白圆
ctx.save();
ctx.shadowBlur=5;
ctx.shadowColor="#313131";
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.beginPath();
ctx.arc(0,0,15,0,2*Math.PI);
ctx.stroke();
var f_jb=ctx.createRadialGradient(-5,-5,0,0,0,17);
f_jb.addColorStop("0","#ffffff");
f_jb.addColorStop("0.6","#ffffff");
f_jb.addColorStop("0.8","c0c0c0");
f_jb.addColorStop("1","e2e2e2");
ctx.fillStyle=f_jb;
ctx.fill();
ctx.closePath();
ctx.restore();
//秒针
x=-30;
y=-2;
w=140;
h=4;
r=1;
ctx.save();
ctx.rotate(s);
ctx.shadowBlur=5;
ctx.shadowColor="#313131";
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.beginPath();
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.stroke();
ctx.closePath();
ctx.fillStyle="#c15b4f";
ctx.fill();
ctx.restore();
//小红圆
ctx.shadowBlur=2;
ctx.shadowColor="#313131";
ctx.shadowOffsetX=1;
ctx.shadowOffsetY=1;
ctx.beginPath();
ctx.arc(0,0,7,0,2*Math.PI);
ctx.stroke();
var f_jb=ctx.createRadialGradient(-2,-2,0,0,0,8);
f_jb.addColorStop("0","#f35a47");
f_jb.addColorStop("0.6","#c15b4f");
f_jb.addColorStop("0.8","c15b4f");
f_jb.addColorStop("1","c15b4f");
ctx.fillStyle=f_jb;
ctx.fill();
ctx.closePath();
//
//
//
// ctx.translate(200,200);
// ctx.translate(0,0);
// ctx.shadowBlur=3;
// ctx.shadowColor="#2f2f2f";
// ctx.shadowOffsetX=2;
// ctx.shadowOffsetY=2;
// f_jb=ctx.createRadialGradient(200,200,12,205,205,20);
// f_jb.addColorStop("0","#dddddd");
// f_jb.addColorStop("0.7","#c7c7c7");
// f_jb.addColorStop("1.0","#ebebeb");
// ctx.fillStyle=f_jb;
// ctx.beginPath();
// ctx.arc(0,0,20,0,2*Math.PI);
// ctx.fill();
ctx.restore();
setTimeout(Close,1000);
}
//钟圆
//
//阴影设置
//ctx.shadowBlur=10;
//ctx.shadowColor="#260000";
// ctx.shadowOffsetX=10;
// ctx.shadowOffsetY=10;
//
// var ss=ctx.createLinearGradient(0,0,150,0);
// var st=ctx.createRadialGradient(100,100,0,300,300,300);
// st.addColorStop("0","magenta");
// st.addColorStop("0.5","blue");
// st.addColorStop("1.0","red");
//
// ss.addColorStop("0","magenta");
// ss.addColorStop("0.5","blue");
// ss.addColorStop("1.0","red");
//
// 用渐变进行填充
// ctx.fillStyle=st;
// ctx.strokeStyle=ss;
// ctx.lineWidth=5;
// ctx.fill();
// ctx.stroke();
function Noshadow()
{
ctx.shadowBlur=0;
ctx.shadowColor="";
ctx.shadowOffsetX=0;
ctx.shadowOffsetY=0;
}
//setInterval(function(){ Close(num);num++; },1000);
</script>
</body>
</html>
浙公网安备 33010602011771号