以下为网络上的来的通过html5 canvas绘制时钟的代码。
来自http://www.open-open.com/lib/view/open1331474009296.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.οnlοad=function(){
clock();
setInterval(clock,1000);///每一秒钟重新绘制一次
};
function clock(){
///得到时分秒
var now=new Date();
var sec=now.getSeconds(),min=now.getMinutes(),hour=now.getHours();
hour=hour>=12?hour-12:hour;
var c=document.getElementById("myCanvas").getContext("2d");
c.save();
c.clearRect(0,0,150,150); ///初始化画布
c.translate(75,75);
c.scale(0.4,0.4);
c.rotate(-Math.PI/2);
c.strokeStyle="black";
c.fillStyle="black";
c.lineWidth=8;
c.lineCap="round";
c.save();
c.beginPath();
for(var i=0;i<12;i++){///小时刻度
c.rotate(Math.PI/6);
c.moveTo(100,0);
c.lineTo(120,0);
}
c.stroke();
c.restore();
c.save();
c.lineWidth=5;
c.beginPath();
for(var i=0;i<60;i++){///分钟刻度
if(i%5!=0){
c.moveTo(117,0);
c.lineTo(120,0);
}
c.rotate(Math.PI/30);
}
c.stroke();
c.restore();
c.save();
c.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);///画上时针
c.lineWidth=14;
c.beginPath();
c.moveTo(-20,0);
c.lineTo(75,0);
c.stroke();
c.restore();
c.save();
c.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);///分针
c.strokeStyle="#29A8DE";
c.lineWith=10;
c.beginPath();
c.moveTo(-28,0);
c.lineTo(102,0);
c.stroke();
c.restore();
c.save();
c.rotate(sec*Math.PI/30);///秒针
c.strokeStyle="#D40000";
c.lineWidth=6;
c.beginPath();
c.moveTo(-30,0);
c.lineTo(83,0);
c.stroke();
c.restore();
c.save();
///表框
c.lineWidth=14;
c.strokeStyle="#325FA2";
c.beginPath();
c.arc(0,0,142,0,Math.PI*2,true);
c.stroke();
c.restore();
c.restore();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" ></canvas>
</body>
主要函数解释：
beginPath() 方法开始一条路径，或重置当前的路径。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。
Date对象的常用方法总结：
getDate():根据本地时间返回Date对象的日期1-31
getDay():根据本地时间返回Date对象的星期数0-6
getMonth():根据本地时间返回Date对象的月份数0-11
getYear():根据本地时间返回Date对象的年份数（在2000年以前的返回年份数后两位，2000年以后返回4位）
getFullYear():根据本地时间，返回以4位整数表示的Date对象的年份数。
getHours():根据本地时间返回Date对象的小时数
getMinutes():根据本地时间返回Date对象的分钟数
getSeconds():根据本地时间返回Date对象的秒数
getTime():根据本地时间返回自1970年1月1日00:00:00以来的毫秒数
setYear(年份数):设置Date对象的年份数
setFullYear(年份数[，月份，日期数]):设置Date对象的年份数
setDate(日期数):设置Date对象的当月号数
setMonth(月[,日]):设置Date对象的月份
setHours(小时[,分,秒,毫秒]):设置Date对象的小时数
setMinutes(分[,秒,毫秒]):设置Date对象的分钟数
setSeconds(秒[,毫秒]):设置Date对象的秒数
setMilliSeconds(毫秒):设置对象的毫秒数
setTime(总毫秒数):设置Date对象1970年1月1日00:00:00以来的毫秒数
toLocaleString():以本地时间格式显示，并以字符串表示。
由以上set类型的函数，可以构造一个能够自行调整时间的时钟。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id = "clock" width = "500" height = "500">
<p>侬的浏览器不支持canvas标签，无法看到时钟</p>
</canvas>
<form οnsubmit="alert("1")">
<p>小时：<input type="text" id="rehours"/></p>
<p>分钟：<input type="text" id="reminutes"/></p>
<p>秒数：<input type="text" id="reseconds"/></p>
<input type="button" value="改变时间" onClick="oc()"/>
</form>
<script>
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时必须获取浮点类型(小时+分针的时间)
hour = hour +min/60;
hour = hour > 12 ? hour-12:hour;//12小时
function oc(){
var newhours=document.getElementById('rehours');
var newminutes=document.getElementById('reminutes');
var newseconds=document.getElementById('reseconds');
//var change=new Date();
hour=parseInt(newhours.value);
sec=parseInt(newseconds.value);
min=(parseInt(newminutes.value));
//小时必须获取浮点类型(小时+分针的时间)
hour = hour +min/60;
hour = hour > 12 ? hour-12:hour;//12小时
}
function drawClock(){
var countnum=0;
//清除画布
cxt.clearRect(0,0,500,500);
//表盘蓝色
cxt.lineWidth = 5;
cxt.strokeStyle = "blue"
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//刻度
//分刻度
for(var i = 0; i < 12; i++)
{
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = "black";
cxt.translate(250,250);//设置0,0点
cxt.rotate(i*30*Math.PI/180);//设置旋转角度
cxt.beginPath();
cxt.moveTo(0,195);
cxt.lineTo(0,175);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//秒刻度
for(var i = 0; i < 60; i++)
{
cxt.save();
cxt.lineWidth = 2;
cxt.strokeStyle = "black";
cxt.translate(250,250);//设置0,0点
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,195);
cxt.lineTo(0,180);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = "black";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-110);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = "black";
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth = 2;
cxt.strokeStyle = "red";
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
//秒针前端小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.fillStyle = "red";
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
//交叉点
cxt.save();
cxt.lineWidth = 2;
cxt.strokeStyle = "red";
cxt.translate(250,250);
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.fillStyle="gray";
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
if(sec==59)
{
sec=0;
min=min+1;
}
if (min==59)
{
hour=hour+1;
min=0;
}
sec=sec+1;
}
setInterval(drawClock,1000);//使用setInterval，让时钟动起来
// 不再实时读取系统时间，只在加载的一瞬间读取，然后每秒设定角度偏移。
//点击按钮时需要刷新以下页面，变量值需要重新设置。
</script>
</body>
</html>
8459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
