最近闲下来,开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易时钟实例。
PS: 例子为实验性例子,欢迎批判~~~~
一、实现逻辑
1、先画出表盘:最外端的圆、时刻度、分秒刻度
2、使用canvas的画布旋转,分别画出时针、分针、秒针(含秒针外端圆点)
3、定时清空画布,并重新绘制时针。
二、代码展示
1、效果图
2、以下为代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title> Canvas-时钟 </title>
</head>
<body>
<canvas width="500" height="500" id="clock" >您的浏览器不支持<code>canvas</code>标签!</canvas>
<script>
//获取画布DOM
var dCanvas = document.getElementById('clock');
//设置绘图环境.注意只能用小写“2d”
var paper = dCanvas.getContext('2d');
var CX=250,CY=250;
//画表盆(蓝色)
clockHandler();
window.setInterval(clockHandler,1000);
function drawClockBg(_paper){
_paper.lineWidth=10;
_paper.strokeStyle="blue";
_paper.beginPath();
_paper.arc(CX,CY,200,0,360,false);//最后一个参数,表示是否顺时针画
_paper.stroke();
_paper.closePath();
};
/**
* 画时针刻度
*
**/
function drawClockHour(_paper){
for(var i=0;i<12;i++){
_paper.save();
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(i*30*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-175);
_paper.lineTo(0,-195);
_paper.stroke();
_paper.closePath();
_paper.restore();
}
};
/**
* 画秒/分刻度
*
**/
function drawClockSecond(_paper){
for(var i=0;i<60;i++){
if(i%5===0)continue;
_paper.save();
_paper.lineWidth=4;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(i*6*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-185);
_paper.lineTo(0,-195);
_paper.stroke();
_paper.closePath();
_paper.restore();
}
};
/**
* 画时针
**/
function drawClockHourLine(_paper,_hour){
_paper.save();
_paper.lineWidth=10;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(_hour*30*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-85);
_paper.lineTo(0,5);
_paper.stroke();
_paper.closePath();
_paper.restore();
};
/**
* 画分针
**/
function drawClockMinuteLine(_paper,_minute){
_paper.save();
_paper.lineWidth=6;
_paper.strokeStyle="black";
_paper.translate(CX,CY);
_paper.rotate(_minute*6*Math.PI/180);
_paper.beginPath();
_paper.moveTo(0,-125);
_paper.lineTo(0,10);
_paper.stroke();
_paper.closePath();
_paper.restore();
};
/**
* 画秒针
**/
function drawClockSecondLine(_paper,_second){
_paper.save();
_paper.lineWidth=3;
_paper.strokeStyle="red";
_paper.translate(CX,CY);
_paper.rotate(_second*6*Math.PI/180);
//秒针线
_paper.beginPath();
_paper.moveTo(0,-185);
_paper.lineTo(0,15);
_paper.stroke();
_paper.closePath();
//初始化秒针圆点
drawBaseCircle(_paper,0,-160,"yellow");
_paper.restore();
};
/**
* 画圆点 表盘圆点、秒针外端圆点
**/
function drawBaseCircle(_paper, _x, _y , fs){
if(typeof fs == 'undefined') fs = "gray";
_paper.beginPath();
_paper.fillStyle=fs;
_paper.arc(_x,_y,5,0,360,false);
_paper.fill();
_paper.closePath();
}
/**
* 定时处理时钟指针
**/
function clockHandler(){
//清空已画的内容
paper.clearRect(0,0,500,500);
//画表盆(蓝色)
drawClockBg(paper);
//画时刻度
drawClockHour(paper);
//画秒刻度
drawClockSecond(paper);
//初始化时间
var nowDate = new Date();
//获取当前时间的小时数
var hour = (nowDate.getHours()%12) + parseFloat(nowDate.getMinutes()/60,2);
//获取当前时间的分钟数
var minute = nowDate.getMinutes() + parseFloat(nowDate.getSeconds()/60,2);
//获取当前时间的秒数
var second = nowDate.getSeconds();
//初始化时针
drawClockHourLine(paper,hour);
//初始化分针
drawClockMinuteLine(paper,minute);
//初始化秒针
drawClockSecondLine(paper,second);
//初始化中心圆点
drawBaseCircle(paper,CX,CY);
};
</script>
</body>
</html>
三、后记
1、代码在FireFox 32.0.3上,测试无误!