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实现的几个小loading效果
Sep 27 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python实现多进程的四种方式
2019/02/22 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
“学雷锋活动月”总结
2014/03/09 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
工人先进事迹材料
2014/12/26 职场文书
困难补助申请报告
2015/05/19 职场文书
无保留意见审计报告
2015/06/05 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
详解Python中*args和**kwargs的使用
2022/04/07 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python