jQuery + Canvas 旋转的时钟_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> <script type="text/javascript" src="http://www.cnblogs.com/lovling/p/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> <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>

Tags：jQuery