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

canvas绘制时钟

2016-09-29 08:04 211 查看

今天,我们用canvas来制作一个经典时钟 ~ 炫到酷

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title>canvas绘制钟表</title>
<style
type="text/css">
#canvas1{
/*border: 3px solid red;*/
margin:
0 auto;
display:
block;
}
</style>
</head>
<body>
<canvas
id="canvas1"
width="600" height="600"></canvas>
</body>
<script
type="text/javascript">
var
canvas = document.getElementById("canvas1");
var context
= canvas.getContext("2d");
//通过平移旋转改变画笔的原始坐标位置
var
yuanShiWidth = canvas.width *
0.5;//X轴
var
yuanShiHeight = canvas.height *
0.5;//Y轴
context.translate(yuanShiWidth,yuanShiHeight);
//通过平移旋转改变画笔的X轴和Y轴的方向
context.rotate(-Math.PI
/ 2);//逆时针旋转90度
//绘制表盘
function
dralDial () {
//外层圆
context.beginPath();
context.arc(0,0,yuanShiWidth,0,Math.PI
* 2,false);
context.fillStyle
= "deepskyblue";
context.fill();
//内层圆
context.beginPath();
context.arc(0,0,280,0,Math.PI
* 2,false);
context.lineWidth
= 10;
context.fillStyle
= "ivory";
context.fill();
}
//绘制刻度时刻和分刻
function
drawScale () {
for
(var i = 0; i
< 60; i++) {
if
(i % 5 ==
0) {
//绘制时刻整点
context.beginPath();
context.moveTo(238,0);
context.lineTo(270,0);
context.strokeStyle
= "black";
context.stroke();
}
else{
//绘制分刻非整点
context.beginPath();
context.moveTo(245,0);
context.lineTo(270,0);
context.lineWidth
= 5;
context.strokeStyle
= "orchid";
context.stroke();
}
//旋转6度
context.rotate(Math.PI
<
4000
span class="s11">/ 180 *
6);
}
}
//每一度
var
yiDu = Math.PI / 180;
//绘制时针分针秒针
function
drawTime () {
//获取当前系统时间
var
time = new Date();
var
hour = time.getHours();
var
minute = time.getMinutes();
var
second = time.getSeconds();
//调用save函数，保存当前的绘制状态
context.save();
//需要旋转的角度(坐标轴)
context.rotate(yiDu
* 30 *
hour + yiDu * minute
/ 60 * 30);
//绘制时针
context.beginPath();
context.moveTo(-20,0);
context.lineTo(180,0);
context.lineWidth
= 13;
context.strokeStyle
= "#FFA500"
context.stroke();
//调用restore函数移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化
context.restore();
//绘制分针
context.save();
context.rotate(yiDu
* 6 * minute
+ yiDu * second / 60
* 6);
context.beginPath();
context.moveTo(-30,0);
context.lineTo(210,0);
context.lineWidth
= 10;
context.strokeStyle
= "#FFA500";
context.stroke();
context.restore();
//绘制秒针
context.save();
context.rotate(yiDu
* 6 * second);context.beginPath();
context.moveTo(-40,0);
context.lineTo(235,0);
context.lineWidth
= 8;
context.strokeStyle
= "red";
context.stroke();
context.restore();
//美观-绘制圆
context.beginPath();
context.arc(0,0,15,0,Math.PI
* 2,false);
context.fillStyle
= "rgba(80,100,200,0.5)";
context.fill()

}

//绘制钟表
function
drawClock () {
dralDial();
drawScale();
drawTime();
//刷新频率
window.requestAnimationFrame(drawClock);
}
drawClock();
</script>
</html>

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

标签： javascript canvas

相关文章推荐

新的分享

章节导航