<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try to draw the colock</title>
<script src="js/modernizr-1.7.js"></script>
<script type="text/javascript">
window.addEventListener("load",eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport() //检测浏览器是否支持canvas属性
{
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext('2d'); //获取2d上下文
}
var clockRadius=50; //时钟原型半径
var clockImage=new Image();
clockImage.addEventListener("load",eventCfaceLoaded,false); //添加事件
clockImage.src="images/cface.png";
function eventCfaceLoaded(){
startUp();
}
function startUp(){
setInterval(drawScreen,1000); //设置一个定时器，进行画布的不断重绘
}
function clear() { // clear canvas function
context.clearRect(0, 0, context.canvas.width, context.canvas.height); //清除画布内容
}
function drawScreen()
{
clear();
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
hours=hours>12?hours-12:hours;
var hour=hours+minutes/60;
var minute=minutes+minutes/60;
context.save(); //保存画布内容
context.drawImage(clockImage,0,0,100,100);
context.translate(theCanvas.width/2,theCanvas.height/2);
context.beginPath(); //开始绘制
//draw number
context.fillStyle="#000";
context.font="10px Arial";
context.textAlign="center";
context.textBaseline="middle";
for(var n=1;n<=12;n++){
var theta=(n-3)*(Math.PI*2)/12; //绘制1-12数字的位置，自己结合坐标轴想想就知道为什么是n-3了
var x=clockRadius*0.7*Math.cos(theta);
var y=clockRadius*0.7*Math.sin(theta);
context.fillText(n,x,y); //绘制数字
}
context.save(); //保存画布内容
var theta=(hour-3)*2*Math.PI/12;
context.rotate(theta);
context.beginPath();
context.moveTo(-10,-3);
context.lineTo(-10,3);
context.lineTo(clockRadius*0.5,1);
context.lineTo(clockRadius*0.5,-1);
context.fill();
context.restore();
context.save();
var theta=(minute-15)*Math.PI*2/60;
context.rotate(theta);
context.beginPath();
context.moveTo(-10,-2);
context.lineTo(-10,2);
context.lineTo(clockRadius*0.7,1);
context.lineTo(clockRadius*0.7,-1);
context.fill();
context.restore();
context.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
context.rotate(theta);
context.beginPath();
context.moveTo(-10, -2);
context.lineTo(-10, 2);
context.lineTo(clockRadius * 0.8, 1);
context.lineTo(clockRadius * 0.8, -1);
context.fillStyle = '#0f0';
context.fill();
context.restore();
context.restore();
}
}
</script>
<style type="text/css">
body{margin: 0px;padding: 0px;background-color: #eee;font-size: 4px Arial,sans-serif;}
.clocks{height: 100px;width: 100px;margin: 25px auto;}
</style>
</head>
<body>
<div class="clocks" style="position:absolute;top:50px;left:50px;">
<canvas id="canvas" width="100" height="100" >
your broswer is not support HTML5!
</canvas>
</div>
</body>
</html>
补充说明：
save是保存当前绘图状态，并把它压入一个堆栈
restore是恢复上次保存的绘图状态，从堆栈弹出。
关键在于绘图状态，它是指Canvas的平移、放缩、旋转、错切、裁剪等操作或者颜色、线条等样式。
beginPath()和closePath()也就是绘制线的开始和结束
HTML5 Canvas绘制实时时钟
时间： 2024-10-25 05:47:35