canvas绘制时钟
2018-03-24 21:50
309 查看
本篇博客旨在通过使用canvas实现时钟绘制,以及当改变canvas的大小时,最终效果比例变化与canvas相同。
运行效果图展示:
index.html部分:
clock.js部分
运行效果图展示:
index.html部分:
<!DOCTYPE html> <html> <head> <title>canvas绘制时钟</title> <meta charset="utf-8"> <style type="text/css"> div{ text-align: center; margin-top:250px; } #clock{ border: 1px solid #ccc } </style> </head> <body> <div> <canvas id="clock" height="600px" width="600px"></canvas> </div> <script type="text/javascript" src="js/clock.js"></script> </body> </html>
clock.js部分
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(); ctx.lineWidth = 10 * rem; ctx.arc(0, 0, r - ctx.lineWidth/2, 0, 2*Math.PI,false); ctx.stroke(); ctx.font = 18 * rem +'px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; hourNumbers.forEach(function (number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30* rem); var y = Math.sin(rad) * (r - 30* rem); ctx.fillText(number, x, y); }); for (var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18* rem); var y = Math.sin(rad) * (r - 18* rem); ctx.beginPath(); if (i % 5 == 0) { ctx.fillStyle = '#000'; 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); } 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; rad = rad + mrad; ctx.rotate(rad); ctx.lineWidth = 6*rem; ctx.lineCap = 'round'; ctx.moveTo(0,10*rem); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); } function drawMinute(minute) { 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,30*rem-r); 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.lineWidth = 3; ctx.lineCap = 'round'; ctx.moveTo(-2*rem,20*rem); ctx.lineTo(2*rem,20*rem); ctx.lineTo(-1,18*rem-r); ctx.lineTo(1,18*rem-r); ctx.fill(); ctx.restore(); } function drawDot(argument) { ctx.beginPath(); ctx.fillStyle = '#fff'; ctx.arc(0, 0, 3*rem, 0, 2*Math.PI,false); ctx.fill(); } 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);
相关文章推荐
- 通过html5 canvas绘制时钟
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
- android 用canvas 绘制简单圆形时钟
- 使用canvas 绘制时钟
- h5 canvas绘制的时钟
- JavaScript canvas 绘制圆形时钟
- canvas绘制时钟
- canvas绘制时钟
- canvas绘制表盘时钟
- JavaScript html5 canvas绘制时钟效果
- canvas 绘制圆形时钟
- android 用canvas 绘制简单圆形时钟
- 用canvas 写时钟程序之绘制各个边沿的时间点
- Canvas绘制时钟
- Android 自定义控件-Canvas和Paint绘图详解-手把手带你绘制一个时钟.
- 使用canvas绘制动画时钟
- 利用canvas绘制一个简单时钟
- Html5 Canvas时钟绘制
- canvas绘制时钟
- android 用canvas 绘制简单圆形时钟