canvas绘制圆形与12边形（多边形）时钟

• 先看圆形时钟
• • 大致3个步骤
  • • 1.获取画布及内容，定义初始变量
    • 2.封装3个方法
    • 3.画时钟，及封装
• 12边形时钟
• • • 相对于圆形时钟，12边形刚好对应于时钟的12个刻度，即我们仅需要改变一下外边框（时钟盘）和刻度微调即可

//1 var canvas = document.querySelector('#cont'); //21,2步一般固定，除了1的画布id获取，2固定 var ctx = canvas.getContext('2d'); //3 定义基础变量 var w = h = 400; //时钟宽高 var x = y = 200; //时钟中心坐标 var r = 180; //时钟半径 var r_hour = 60; //时针长度 var r_minute = 120; //分针长度 var r_secound = 140; //秒针长度 var r_text = 140; //定义表盘文字半径 var r_square = 165; //刻度 var r_circle = 10; //表盘小圆点 var deg = 2 * Math.PI; //定义基本的四角

/*** 写文字 */ function drawText(text, x, y) {ctx.font = 'bold 26px 楷体'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, x, y); }/*** 画直线*/ function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2) //颜色 ctx.strokeStyle = color; //线宽,不用单位 ctx.lineWidth = width; ctx.lineCap = 'round'; //变圆 ctx.stroke(); ctx.closePath(); }/*** 画圆 */ function drawCircle(x, y, r, color) {ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2,) ctx.fillStyle = color || '#000'; ctx.fill(); ctx.closePath(); }

//平移中心点,x=y=0 ctx.translate(w / 2, h / 2);

//step1：画圆盘 drawCircle(0, 0, r, '#fff'); //step2.画时钟的表针//获取当前时间 var date = new Date(); //* (deg / 12) - deg / 4 var hour = date.getHours() * (deg / 12) - deg / 4; //[0,23] var miunte = date.getMinutes() * (deg / 60) - deg / 4; //[0-59] var second = date.getSeconds() * (deg / 60) - deg / 4; //[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10) drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5) drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉 drawCircle(0, 0, 10, '#000'); //step4，画数字 for (let i = 1; i <= 12; i++) {/*** * 计算圆周坐标 * x= x+r*cos(#) * y = y+r*cos(#) */ var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2; var x = r_text * Math.cos(θ); var y = r_text * Math.sin(θ); drawText(i, x, y); }//step5，画刻度 for (let i = 0; i < 60; i++) {/*** * x1,y1x2,y2 */ var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2; var x1 = r * Math.cos(θ); var y1 = r * Math.sin(θ); /*判断是否为整点*/ if (i % 5 == 0) {var x2 = r_square * Math.cos(θ); var y2 = r_square * Math.sin(θ); drawLine(x1, y1, x2, y2, '#f00', 3); } else {var x2 = (r_square + 4) * Math.cos(θ); var y2 = (r_square + 4) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#bbb', 2); }}

//初始化执行一次 //clock(); setInterval(function () {clock(); }, 1000)

> canvas {margin: 0 auto; border: 2px solid #aaa; display: block; }.clock {width: 400px; height: 400px; margin: 100px auto; background: #ddd; border-radius: 20px; }

您的浏览器版本过低，升级浏览器或者使用Chrome打开 >/** @type {HTMLCanvasElement} */ //1 var canvas = document.querySelector('#cont'); //21,2步一般固定，除了1的画布id获取，2固定 var ctx = canvas.getContext('2d'); //3 定义基础变量 var w = h = 400; //时钟宽高 var x = y = 200; //时钟中心坐标 var r = 180; //时钟半径 var r_hour = 60; //时针长度 var r_minute = 120; //分针长度 var r_secound = 140; //秒针长度 var r_text = 140; //定义表盘文字半径 var r_square = 165; //刻度 var r_circle = 10; //表盘小圆点 var deg = 2 * Math.PI; //定义基本的四角//平移中心点,x=y=0 ctx.translate(w / 2, h / 2); function clock() {//step1：画圆盘 drawCircle(0, 0, r, '#fff'); //step2.画时钟的表针//获取当前时间 var date = new Date(); //* (deg / 12) - deg / 4 var hour = date.getHours() * (deg / 12) - deg / 4; //[0,23] var miunte = date.getMinutes() * (deg / 60) - deg / 4; //[0-59] var second = date.getSeconds() * (deg / 60) - deg / 4; //[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10) drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5) drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉 drawCircle(0, 0, 10, '#000'); //step4，画数字 for (let i = 1; i <= 12; i++) {/*** * 计算圆周坐标 * x= x+r*cos(#) * y = y+r*cos(#) */ var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2; var x = r_text * Math.cos(θ); var y = r_text * Math.sin(θ); drawText(i, x, y); }//step5，画刻度 for (let i = 0; i < 60; i++) {/*** * x1,y1x2,y2 */ var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2; var x1 = r * Math.cos(θ); var y1 = r * Math.sin(θ); /*判断是否为整点*/ if (i % 5 == 0) {var x2 = r_square * Math.cos(θ); var y2 = r_square * Math.sin(θ); drawLine(x1, y1, x2, y2, '#f00', 3); } else {var x2 = (r_square + 4) * Math.cos(θ); var y2 = (r_square + 4) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#bbb', 2); }} }//初始化执行一次 //clock(); setInterval(function () {clock(); }, 1000)/*** 写文字 */ function drawText(text, x, y) {ctx.font = 'bold 26px 楷体'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, x, y); }/*** 画直线*/ function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2) //颜色 ctx.strokeStyle = color; //线宽,不用单位 ctx.lineWidth = width; ctx.lineCap = 'round'; //变圆 ctx.stroke(); ctx.closePath(); }/*** 画圆 */ function drawCircle(x, y, r, color) {ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2,) ctx.fillStyle = color || '#000'; ctx.fill(); ctx.closePath(); }

//step1.画12边形时钟盘 for (let i = 0; i < 12; i++) {var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2; var x1 = (r + 10) * Math.cos(θ); var y1 = (r + 10) * Math.sin(θ); var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12)); var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12)); drawLine(x1, y1, x2, y2, '#bbb', 2); }

for (let i = 0; i < 60; i++) {/*** * x1,y1x2,y2 */ var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2; var x1 = r * Math.cos(θ); var y1 = r * Math.sin(θ); /*判断是否为整点*/ if (i % 5 == 0) {var x1 = (r + 5) * Math.cos(θ); var y1 = (r + 5) * Math.sin(θ); var x2 = (r_square) * Math.cos(θ); var y2 = (r_square) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#f00', 3); } else {var x2 = (r_square + 4) * Math.cos(θ); var y2 = (r_square + 4) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#bbb', 2); }}

> canvas {margin: 0 auto; display: block; border: solid; }.clock {width: 400px; height: 400px; margin: 100px auto; border-radius: 20px; }

您的浏览器版本过低，升级浏览器或者使用Chrome打开 >/** @type {HTMLCanvasElement} */ //1 var canvas = document.querySelector('#cont'); //21,2步一般固定，除了1的画布id获取，2固定 var ctx = canvas.getContext('2d'); //3 定义基础变量 var w = h = 400; //时钟宽高 var x = y = 200; //时钟中心坐标 var r = 180; //时钟半径 var r_hour = 60; //时针长度 var r_minute = 120; //分针长度 var r_secound = 140; //秒针长度 var r_text = 140; //定义表盘文字半径 var r_square = 165; //刻度 var r_circle = 10; //表盘小圆点 var deg = 2 * Math.PI; //定义基本的四角//平移中心点,x=y=0ctx.translate(w / 2, h / 2); //step1.画12边形时钟盘 for (let i = 0; i < 12; i++) {var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2; var x1 = (r + 10) * Math.cos(θ); var y1 = (r + 10) * Math.sin(θ); var x2 = (r + 10) * Math.cos(θ + (Math.PI * 2 / 12)); var y2 = (r + 10) * Math.sin(θ + (Math.PI * 2 / 12)); drawLine(x1, y1, x2, y2, '#bbb', 2); }function clock() {//step1：画圆盘 drawCircle(0, 0, r, '#fff'); //step2.画时钟的表针//获取当前时间 var date = new Date(); //* (deg / 12) - deg / 4 var hour = date.getHours() * (deg / 12) - deg / 4; //[0,23] var miunte = date.getMinutes() * (deg / 60) - deg / 4; //[0-59] var second = date.getSeconds() * (deg / 60) - deg / 4; //[0-59]drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), 'black', 10) drawLine(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), 'black', 5) drawLine(0, 0, r_secound * Math.cos(second), r_secound * Math.sin(second), 'black', 2)//step3，画表钉 drawCircle(0, 0, 10, '#000'); //step4，画数字 for (let i = 1; i <= 12; i++) {/*** * 计算圆周坐标 * x= x+r*cos(#) * y = y+r*cos(#) */ var θ = ((Math.PI * 2) / 12) * i - Math.PI / 2; var x = r_text * Math.cos(θ); var y = r_text * Math.sin(θ); drawText(i, x, y); }//step5，画刻度 for (let i = 0; i < 60; i++) {/*** * x1,y1x2,y2 */ var θ = ((Math.PI * 2) / 60) * i - Math.PI / 2; var x1 = r * Math.cos(θ); var y1 = r * Math.sin(θ); /*判断是否为整点*/ if (i % 5 == 0) {var x1 = (r + 5) * Math.cos(θ); var y1 = (r + 5) * Math.sin(θ); var x2 = (r_square) * Math.cos(θ); var y2 = (r_square) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#f00', 3); } else {var x2 = (r_square + 4) * Math.cos(θ); var y2 = (r_square + 4) * Math.sin(θ); drawLine(x1, y1, x2, y2, '#bbb', 2); }} }//初始化执行一次 clock(); setInterval(function () {clock(); drawText('时钟', 0, 100); }, 1000)/*** 写文字 */ function drawText(text, x, y) {ctx.font = 'bold 26px 楷体'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, x, y); }/*** 画直线*/ function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2) //颜色 ctx.strokeStyle = color; //线宽,不用单位 ctx.lineWidth = width; ctx.lineCap = 'round'; //变圆 ctx.stroke(); ctx.closePath(); }/*** 画圆 */ function drawCircle(x, y, r, color) {ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2,) ctx.fillStyle = color || '#000'; ctx.fill(); ctx.closePath(); }

推荐阅读

• 

  数值分析简明教程第二版pdf
• 

  Win7系统电脑共享文件时提示输入网络密码怎么解决？
• 

  elasticsearch index 之 Mapping
• 

  百度拍照搜题 搜题软件哪个好
• 

  vue3:setup的两个注意点详解
• 

  袁老一路走好
• 

  公务员考试地点是怎么安排的？河北省公务员考试地点
• 

  初一初二成绩挺好的,初三成绩一次比一次低,该怎样调整？
• 

  企业对银行的业务需求分析报告,银行管理系统需求分析报告
• 

  申请飞贷需要什么条件？飞贷申请流程介绍！
• 

  龟头炎治疗最好方法介绍
• 

  清朝两宫太后指谁
• 

  让你省下不少钱的小技巧 惠普7730墨盒清零教程
• 

  焦点中八，刘佳佳郑州，坚持分享第226天，2018.8.10
• 

  收之桑榆 失之东隅是什么意思
• 

  康熙皇帝的母亲是谁
• 

  梦幻诛仙青云派全攻略
• 

  王者荣耀里海鲜组合厉害吗？
• 

  java聊天源代码 java聊天程序设计代码
• 

  例假期间适合什么时候吃冬枣

• canvas（一）基本用法
• Python绘制小红花
• vue|vue canvas 手绘进度条动画
• canvas不过如此（一）
• HTML5新增选择器属性方法
• HTML|HTML canvas中translate()与rotate()的理解
• HTML5学习之ul|HTML5学习之ul li列表实战
• html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置
• OpenGL|OpenGL 绘制甜甜圈深度测试、多边形偏移、裁剪、 混合
• 把知识编成网纺成布