效果图:
步骤:
1.canvas是一个画图的容器,里面没有图形,需要你自己加上图形
先定义好canvas的宽、高
2.定义js函数实现时钟动画,具体步骤如下:
1)获取画布的id,然后通过getContext() 方法返回一个用于在画布上绘图的环境。
语法:Canvas.getContext(contextID)。定义好宽、高、半径。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘
图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
2)定义好画图背景,现将圆画出来-》在画上面的数字=》然后画刻度
a、每画一部分都需要用beginPath() 方法开始一条路径,或重置当前的路径。
b、设置好线宽之后画圆,画圆采用arc()函数。arc()创建弧/曲线(用于创建圆形或部分圆)该函数
有五个参数,但这画了圆还不能显示出来,所以请使用 stroke() 或 fill() 方法在画布上绘制实际的
弧。stroke()和fill() 的区别是:stroke()是绘制已定义的路径,画线。 而fill()是填充当前绘图(路
径)
c、画时钟上的数字。用数组存储数字,因为画圆是从x轴顺时针画,所以数字是从3开始,所以数
组这样存数字:var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; 对每一个数字,根据它的x,y坐标
画,首先计算弧度,然后根据弧度计算x,y。最后采用fillTex()在画布上绘制“被填充的”文本,
即对应的数字
d、画对应的刻度。 也是同样的道理,获取弧度,根据弧度获取x,y轴,然后画刻度。因为每个数
字之间相隔5个点,所以每五个点的颜色不同。
3)画时针
画之前先保存当前状态,以免受变化后的画布影响。
先用lineWidt画一条线,再用lineCap设置或返回线条的结束端点样式,通过moveTo把路径移动
到画布中的指定点。lineTo添加一个新点,然后在画布中创建从该点到最后指定点的线条,但该方法
并不会创建线条。请使用 stroke() 方法在画布上绘制确切的路径。
4)画分针
与画时针同样的方法,但要注意设置不同的样式
5)画秒针
与画分钟相同的方法
6)画三根时针上的小圆孔
这样可以更逼真,小圆孔利用arc()函数实现
7)获取当前本地时间。通过new一个date来获取,now.getHours、now.getMinutes()、
getSeconds()。再分别调用之前定义的函数
8)调用setInterval(draw,1000),每一秒钟执行一次。实现动画效果。但是要先运行一次,获取本
地时间,不然刷新时会出现一会儿空白。
var dom=document.getElementById('clock');
var ctx=dom.getContext('2d'); //返回一个用于在画布上绘图的环境,该方法返回一个环境变量
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
var rem=width/200; //比例因子,当画布变大或缩小时,指针大小也随之变化
function drawBackground(){
ctx.save(); //保存当前状态
ctx.translate(r,r); //旋转画布
ctx.beginPath(); //beginPath() 方法开始一条路径,或重置当前的路径。
ctx.lineWidth=10*rem;//设置线宽
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false); //创建弧/曲线(用于创建圆形或部分圆)
ctx.stroke(); // 绘制已定义的路径
// ctx.drawImage('img/4.jpg');
ctx.textAlign='center'; // 设置或返回文本内容的当前对齐方式
ctx.textBaseline='middle'; // 设置或返回在绘制文本时使用的当前文本基线
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; //为什么这样定义,因为画圆时,是从3开始顺时针旋转
ctx.font=18*rem+'px Arial'; // 设置或返回文本内容的当前字体属性
hourNumbers.forEach(function(number,i){ //number,i对应数字和索引
var rad=2*Math.PI / 12*i; //定义弧度
var x=Math.cos(rad)*(r-30*rem); //根据弧度求x轴
var y=Math.sin(rad)*(r-30*rem); //根据弧度求y轴
ctx.fillText(number,x,y); //在画布上绘制“被填充的”文本
});
for(i=0;i<60;i++){
var rad=2*Math.PI/60*i; //画时钟的60个点
var x=Math.cos(rad)*(r-18*rem);
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if (i%5==0) {
ctx.fillStyle='#c14543'; //每五个点对应一个数字刻度,设置填充样式为红色
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
else{
ctx.fillStyle='#ccc'; //其余的点填充为灰色
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
// sctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fill();
}
}
function drawHour(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
ctx.lineCap='round'; //设置或返回线条的结束端点样式
ctx.moveTo(0,10*rem);//往上移一点
ctx.lineTo(0,-r/2); //负数往上,正数往下
ctx.stroke();
}
function drawMinute(minute){
ctx.restore();
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem); //负数往上,正数往下
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543';
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,20*rem); //负数往上,正数往下
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
// drawBackground();
function draw(){
ctx.clearRect(0,0,width,height); //每一秒清除一下矩形,不然钟表走过的痕迹都会留下来。
var now= new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
draw()
setInterval(draw,1000); //每一秒调用一次