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 相关文章推荐
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP处理会话函数大总结
2015/08/05 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python requests库用法实例详解
2018/08/14 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
python打包多类型文件的操作方法
2020/09/21 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
个人融资协议书
2014/10/02 职场文书
施工安全员岗位职责
2015/04/11 职场文书
暑期家教宣传单
2015/07/14 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书