jQuery + Canvas 旋转的时钟
Posted 被遗忘的优雅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery + Canvas 旋转的时钟相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: black;
}
#canvas {
background: white;
margin: 100px 0 0 300px;
}
#canvas>span {
color: white;
font-size: 14px;
}
</style>
<body>
<canvas id="canvas" width="600" height="500">
<span>您的浏览器不支持</span>
</canvas>
</body>
</html>
<script type="text/javascript">
/*获取绘制环境*/
var oc = $(‘#canvas‘)[0];
canvas = oc.getContext(‘2d‘);
/*定义圆心和半径*/
var x = 250, y = 250, r = 150;
var time = setInterval(function() {
ClocksWatche();
}, 1000);
function ClocksWatche() {
/*清理画布*/
canvas.clearRect(0, 0, oc.width, oc.height);
/*开始绘制*/
canvas.beginPath();
for(var i = 0; i < 60; i++) {
/*绘制起始点移到圆心*/
canvas.moveTo(x, y);
/*根据圆心和半径每6度绘制一次(圆心横坐标,圆心纵坐标,其实弧度,结束弧度,是否逆时针)*/
canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
}
/*连接至起始点*/
canvas.closePath();
/*画线*/
canvas.stroke();
/*设置线的粗细*/
canvas.lineWidth = 3;
/*开始绘制*/
canvas.beginPath();
for(var i = 0; i < 60; i++) {
/*绘制起始点移到圆心*/
canvas.moveTo(x, y);
/*根据圆心和半径没30度绘制一次*/
canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
}
/*连接至起始点*/
canvas.closePath();
/*画线*/
canvas.stroke();
/*设置填充颜色*/
canvas.fillStyle = ‘white‘;
canvas.beginPath();
canvas.moveTo(x, y);
canvas.arc(x, y, r * 14 / 15, 0, 360, false);
canvas.closePath();
canvas.fill();
var loacalDate = new Date();
var hours = loacalDate.getHours();
var minute = loacalDate.getMinutes();
var sencond = loacalDate.getSeconds();
hours = (hours * 30 - 90 + minute / 2) * Math.PI / 180;
minute = (minute * 6 - 90) * Math.PI / 180;
sencond = (sencond * 6 - 90) * Math.PI / 180;
canvas.beginPath();
canvas.lineWidth = 5;
canvas.moveTo(x, y);
canvas.arc(x, y, r * 8 / 15, hours, hours, false);
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = 3;
canvas.moveTo(x, y);
canvas.arc(x, y, r * 10 / 15, minute, minute, false);
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = 1;
canvas.moveTo(x, y);
canvas.arc(x, y, r * 14 / 15, sencond, sencond, false);
canvas.stroke();
}
</script>
以上是关于jQuery + Canvas 旋转的时钟的主要内容，如果未能解决你的问题，请参考以下文章
使 div 动画并出现顺时针旋转。即 Div 的径向擦除时钟效果
自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段