当前位置:  首页  >  前端开发  >  Html5

Canvas绘制出时钟的代码示例-

​本篇文章给大家带来的内容是关于Canvas绘制出时钟的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇文章给大家带来的内容是关于Canvas绘制出时钟的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

完整代码:




    
    
    
    Document
    



    
你的浏览器不支持canvas
《script》 var dom = document.getElementById('clock'); var ctx = dom.getContext('2d'); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; //绘制表盘 function drawBackground() { ctx.save(); ctx.translate(r, r); ctx.beginPath(); ctx.lineWidth = 10; ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false); ctx.stroke(); var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; //小时数字 hourNumbers.forEach(function (number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30); var y = Math.sin(rad) * (r - 30); ctx.fillText(number, x, y); // console.log(x) }) //绘制分刻度 for (var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18); var y = Math.sin(rad) * (r - 18); ctx.beginPath(); if (i % 5 == 0) { ctx.fillStyle = '#000'; ctx.arc(x, y, 2, 0, 2 * Math.PI, false); } else { ctx.fillStyle = '#ccc'; ctx.arc(x, y, 2, 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; ctx.rotate(rad + mrad); ctx.lineWidth = 6; ctx.lineCap = 'round'; ctx.moveTo(0, 10); 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; ctx.lineCap = 'round'; ctx.moveTo(0, 10); ctx.lineTo(0, -r + 30); ctx.stroke(); ctx.restore(); } //绘制秒针 function drawSecond(second) { ctx.save(); ctx.beginPath(); ctx.fillStyle = 'red' var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2, 20); ctx.lineTo(2, 20); ctx.lineTo(1, -r + 18); ctx.lineTo(-1, -r + 18); ctx.fill(); ctx.restore(); } //绘制指针的端点 function drawDot() { ctx.beginPath(); ctx.fillStyle = 'white'; ctx.arc(0, 0, 3, 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); 《script》

以上就是Canvas绘制出时钟的代码示例的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有