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 给背景设置渐变色的方法
Sep 12 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php实现等比例压缩图片
2018/07/26 PHP
js下弹出窗口的变通
2007/04/18 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python代码实现KNN算法
2017/12/20 Python
Python AES加密实例解析
2018/01/18 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
党员违纪检讨书
2014/02/18 职场文书
村长贪污检举信
2014/04/04 职场文书
八一建军节演讲稿
2014/09/10 职场文书
《学会看病》教学反思
2016/02/17 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
对讲机知识
2022/04/07 无线电