JS+Canvas绘制时钟效果

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

JS+Canvas绘制时钟效果

来源：阅读：821 次日期：2016-06-23 15:50:28

温馨提示：小编为您整理了“JS+Canvas绘制时钟效果”,方便广大网友查阅！

这篇文章主要为大家详细介绍了基于javascript下使用canvas绘制时钟的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了使用canvas绘制时钟的具体代码，供大家参考，具体内容如下

代码如下:

1. clock.html

<!doctype html>

<head>

<title>canvas时钟</title>

</head>

<body>

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//draw();

function draw(){

//得到当前系统的时分秒

var now=new Date();

var sec=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

hour>=12&&(hour=hour-12);

var radius = Math.min(canvas.width/2,canvas.height/2);

//初始化画布

context.save();

context.clearRect(0,0,canvas.width,canvas.height);

context.translate(canvas.width/2,canvas.height/2);

context.rotate(-Math.PI/2);

context.save();

//表框

//小时刻度

context.strokeStyle="black";

context.fillStyle="black";

context.lineWidth=3;

context.lineCap="round";

context.beginPath();

for(var i=0;i<12;i++){

context.rotate(Math.PI/6);

context.moveTo(radius-30,0);

context.lineTo(radius-10,0);

}

context.stroke();

context.restore();

context.save();

//分钟刻度

context.lineWidth=2;

context.beginPath();

for(var i=0;i<60;i++){

if(!i%5==0){

context.moveTo(radius-15,0);

context.lineTo(radius-10,0);

}

context.rotate(Math.PI/30);

}

context.stroke();

context.restore();

context.save();

//画上时针

context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

context.lineWidth=6;

context.beginPath();

context.moveTo(-10,0);

context.lineTo(radius*0.5,0);

context.stroke();

context.restore();

context.save();

context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

context.strokeStyle="#29A8DE";

context.lineWidth=4;

context.lineCap="butt";

context.beginPath();

context.moveTo(-20,0);

context.lineTo(radius*0.7,0);

context.stroke();

context.restore();

context.save();

context.rotate(sec*Math.PI/30);

context.strokeStyle="red";

context.lineWidth=2;

context.lineCap="butt";

context.beginPath();

context.moveTo(-30,0);

context.lineTo(radius*0.9,0);

context.stroke();

context.restore();

context.save();

context.lineWidth=4;

context.strokeStyle="gray";

context.beginPath();

context.arc(0,0,radius,0,Math.PI*2,true);

context.stroke();

context.restore();

}

window.onload=function(){

setInterval(draw,1000)

}

</script>

</body>

</html>

2. JavaScript代码

var canvas=document.getElementById("canvas");

var context=canvas.getContext('2d');

//draw();

function draw(){

//得到当前系统的时分秒

var now=new Date();

var sec=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

hour>=12&&(hour=hour-12);

var radius = Math.min(canvas.width/2,canvas.height/2);

//初始化画布

context.save();

context.clearRect(0,0,canvas.width,canvas.height);

context.translate(canvas.width/2,canvas.height/2);

context.rotate(-Math.PI/2);

context.save();

//表框

//小时刻度

context.strokeStyle="black";

context.fillStyle="black";

context.lineWidth=3;

context.lineCap="round";

context.beginPath();

for(var i=0;i<12;i++){

context.rotate(Math.PI/6);

context.moveTo(radius-30,0);

context.lineTo(radius-10,0);

}

context.stroke();

context.restore();

context.save();

//分钟刻度

context.lineWidth=2;

context.beginPath();

for(var i=0;i<60;i++){

if(!i%5==0){

context.moveTo(radius-15,0);

context.lineTo(radius-10,0);

}

context.rotate(Math.PI/30);

}

context.stroke();

context.restore();

context.save();

//画上时针

context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

context.lineWidth=6;

context.beginPath();

context.moveTo(-10,0);

context.lineTo(radius*0.5,0);

context.stroke();

context.restore();

context.save();

context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

context.strokeStyle="#29A8DE";

context.lineWidth=4;

context.lineCap="butt";

context.beginPath();

context.moveTo(-20,0);

context.lineTo(radius*0.7,0);

context.stroke();

context.restore();

context.save();

context.rotate(sec*Math.PI/30);

context.strokeStyle="red";

context.lineWidth=2;

context.lineCap="butt";

context.beginPath();

context.moveTo(-30,0);

context.lineTo(radius*0.9,0);

context.stroke();

context.restore();

context.save();

context.lineWidth=4;

context.strokeStyle="gray";

context.beginPath();

context.arc(0,0,radius,0,Math.PI*2,true);

context.stroke();

context.restore();

}

window.onload=function(){

setInterval(draw,1000)

}

</script>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

上一篇：JQuery的常用选择器/过滤器/方法全面介绍

下一篇：Javascript之BOM(window对象)详解

手机网站地址：JS+Canvas绘制时钟效果

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！