canvas如何绘制钟表的方法


Posted in HTML / CSS onDecember 13, 2017

本文介绍了canvas如何绘制钟表的方法,分享给大家,具体如下:

效果图为

canvas如何绘制钟表的方法

上代码:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var year,month,day,hour,second,minute;
// 绘制表盘
function drawClockPie(){
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#333';
    ctx.arc(150,150,146,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(150,150,6,0,2*Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
}

// 绘制时刻度
function drawClockHours(){
    for(var i = 0,l = 12; i < 12; i++){
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(i*1/12*2*Math.PI);
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#333';
        ctx.moveTo(0,-140);
        ctx.lineTo(0,-125);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

// 绘制分刻度
function drawClockMins(){
    for(var i = 0,l = 60; i < 60; i++){
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(i*1/60*2*Math.PI);
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#333';
        ctx.moveTo(0,-140);
        ctx.lineTo(0,-133);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
}

// 绘制时针
function drawHourPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate((hour*60*60+minute*60+second)/(12*60*60)*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 3;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-40);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制分针
function drawMinPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate((minute*60+second)/(60*60)*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-60);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制秒针
function drawSecPin(){
    ctx.save();
    ctx.translate(150,150);
    ctx.rotate(second/60*2*Math.PI);
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 1;
    ctx.moveTo(0,0);
    ctx.lineTo(0,-80);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 绘制时间文字
function drawText(){
    hour = hour >= 12 ? hour - 12 : hour;
    var time = '现在是' + year + '年' + month +
    '月' + day + '日' + hour + '时' + minute +
    '分' + second + '秒';
    ctx.font = '15px 黑体';
    ctx.fillText(time,24,350);
}

// 获取时间
function getTimes(){
    var date = new Date();
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hour = date.getHours();
    minute = date.getMinutes();
    second = date.getSeconds();
}
setInterval(function(){
    ctx.clearRect(0,0,600,600);
    drawClockPie();
    drawClockHours();
    drawClockMins();
    getTimes();
    drawText();
    drawHourPin();
    drawMinPin();
    drawSecPin();
},1000);

注:

当然时间也可以不用这样每隔一秒就获取,直接获取一次按秒递增就行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 #HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 #HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 #HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 #HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 #HTML / CSS
html5唤起app的方法
Nov 30 #HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 #HTML / CSS
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
JS 网站性能优化笔记
2011/05/24 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python操作MongoDB基础知识
2013/11/01 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python判断是空的实例分享
2020/07/06 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
初级Java程序员面试题
2016/03/03 面试题
新闻学专业求职信
2014/07/28 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2014年资料员工作总结
2014/11/18 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
文明礼仪倡议书
2015/04/28 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python