您的位置：首页 > Web前端 > HTML5

HTML5 Canvas绘制实时时钟

2014-08-14 02:22 666 查看

<!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()也就是绘制线的开始和结束

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas html5 绘制时钟 save和restore用法

相关文章推荐

新的分享

章节导航