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中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
js调用flash的效果代码
2008/04/26 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
django列表筛选功能的实现代码
2020/03/27 Python
为什么要有struct关键字
2012/05/08 面试题
Android笔试题总结
2014/11/29 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
五年级音乐教学反思
2014/02/06 职场文书
珠宝店促销方案
2014/03/21 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
春秋淹城导游词
2015/02/11 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python