基于canvas的原生JS时钟效果
概述
详细
代码下载:http://www.demodashi.com/demo/11935.html
给大家介绍一个H5时钟效果,美女图片跟代码效果更配哦。
具体canvas中的坐标,线条,圆,图片等知识,大家可以参考教程文档
接下来给大家详细介绍下流程:
第一步:
首先需要创建一个画布canvas标签,定义画笔,做好前期准备工作O(∩_∩)O,
<canvas id="myCanvas" height="420" width="420"></canvas>
var cvs=document.getElementById('myCanvas'); var ctx=cvs.getContext('2d');
第二步:
设置每一秒执行的函数:
function clock() { /*...*/ }clock();setInterval(clock,1000);
画画记录均要写在此函数内,便于后续与计时器绑定。
计时器保证每一秒即执行一次函数,模拟时钟;
接下来补充函数的内容
第三步:
在画布上贴背景图,就是图中的美女,^_^
定义图片:
var img=new Image(); img.src="02.jpg";
此处需要定义一个onload函数,我们希望在图片加载完成之后再进行后续的画画操作,
img.οnlοad=function () { /*...*/ }
第四步:
画钟表盘,地基工作,哈哈( ̄▽ ̄)",每次画画都要又下笔和提笔的动作,即
ctx.beginPath(); /*...*/ ctx.closePath();
ctx.beginPath(); ctx.arc(210,210,200,0,2*Math.PI,false); ctx.strokeStyle="#ccc"; ctx.lineWidth=10; ctx.clip(); ctx.stroke(); ctx.drawImage(img,0,0,420,420); ctx.closePath();
第五步:
画钟表盘上的分刻度和时刻度
这里都采用一个循环,要算好角度,360度平分好。
for (var i=0;i<60;i++){ctx.save();ctx.beginPath();ctx.translate(210,210);ctx.rotate(i*6*Math.PI/180);ctx.moveTo(0,-185);ctx.lineTo(0,-195);ctx.strokeStyle="#FEF319";ctx.lineWidth=5;ctx.stroke();ctx.closePath();ctx.restore(); }
第六步:
画时针 分针 秒针三个指针:
画指针之前我们要先获取当前的时间
var time=new Date(); var h=time.getHours(); var m=time.getMinutes(); var s=time.getSeconds(); h=h>11?h-12:h; h=h+(m/60); m=m+(s/60)
接下来就可以开心的画指针了,
对应每一秒的旋转角度要把握好,特别时时针和分针与秒针的关系。(1分等于60秒,当我没说,,,ԾㅂԾ,,)
ctx.save();ctx.beginPath();ctx.translate(210,210);ctx.rotate(h*30*Math.PI/180);ctx.moveTo(0,14);ctx.lineTo(0,-130);ctx.strokeStyle="#60D9F8";ctx.lineWidth=8;ctx.stroke();ctx.closePath();ctx.restore();
第七步:
画秒针上面的小圈圈
ctx.beginPath(); ctx.arc(0,-150,7,0,2*Math.PI,false); ctx.strokeStyle="#FB1F11"; ctx.lineWidth=3; ctx.fillStyle="#FEF319"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.restore();
坚持坚持马上就成功了!!O(∩_∩)O
第八步:
中心位置的圆,即三个指针的固定点
ctx.save(); ctx.beginPath(); ctx.translate(210,210); ctx.arc(0,0,7,0,2*Math.PI,false); ctx.strokeStyle="#FB1F11"; ctx.lineWidth=3; ctx.fillStyle="#FEF319"; ctx.fill(); ctx.stroke(); ctx.closePath(); ctx.restore();
最后一步,画龙点睛
为钟表添加上电子表的时钟显示,哈哈
var h2=time.getHours(); var m2=time.getMinutes(); var str=h2<10?('0'+h2):h2; var str2=m2<10?('0'+m2):m2; ctx.font="30px 微软雅黑"; ctx.textAlign="center"; ctx.fillStyle="red"; ctx.fillText(str+":"+str2,210,320);
最终效果如下:有木有很漂亮o(* ̄▽ ̄*)ブ!!
代码下载:http://www.demodashi.com/demo/11935.html
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
基于canvas的原生JS时钟效果相关推荐
- s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
- 微信小程序动态点赞php,微信小程序小组件 基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...
- 微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: ...
- js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
- 基于canvas制作绚丽的倒计时效果
基于canvas制作绚丽的倒计时效果 一.先看下效果 项目设计: 数字渲染:数字是存储在一个三维数组里面,通过每次传入一个数字,来取出这个数字对应的点阵模型,这个模型是一个二维数组,有圆点的地方值为1 ...
- Html5基于Canvas画一个动态时钟
文章目录 前言 一.前期准备 二.绘制刻度 1.流程 2.效果图 三.绘制文字 1.流程 2.效果图 四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图 五.绘制圆心 ...
- 基于Canvas的画线动画效果
想着用js实现一个画线动画,借助Canvas实现了.动画效果: 手机端访问 https://sagitarioo.github.io/Personal/htmlCode/linePaint/lineS ...
- 用HTML5新增canvas标签实现个性时钟效果
先看看效果图吧 目录 简介 实现思路 代码 html部分 css部分 js部分 绘制函数部分: 完整代码如下 简介 十二小时制的时钟,最内层是秒针,中间为分针,外层为时针. 中心显示的是当前日期和时间 ...
- html原生上传,一个基于HTML5及原生JS的文件上传组件--JohnUploader
运行效果图 一.组件介绍 基本特点 基于HTML5的FileReader和FormData 可以完成多文件选择,并预览 完成文件的异步上传 原生XHR对象,适配多浏览器 代码 class JohnUp ...
最新文章
- 一图读懂|《“十四五”大数据产业发展规划》
- Redis第四集:redis的基本知识说明
- .net ListT
- python列表_Python列表抽象
- 过拟合解决方法之L2正则化和Dropout
- 华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz
- 杭电4500小Q系列故事——屌丝的逆袭
- vue ---- webpack中loader
- APUE 线程的分离状态
- [转]linux下完全备份数据库mysql
- SendMessage,PostMessage
- 劲舞团显示正在登录message 服务器,[新手]劲舞团2.0之表情和message系统
- 「BZOJ1597」[Usaco2008 Mar] [TYWZOJ1482] 土地购买
- Overture教程之如何更改整首谱子的调号
- AutoCAD输入netload命令后不弹出菜单而是一直显示程序集文件名解决方案
- 2022-2028年全球与中国车辆传感器行业发展趋势及投资战略分析
- 生命倒计时-倒数9116日
- MySQL倒序查询最后三条语句_MySQL 中 一条 order by index limit 语句的分析
- 【计算机网络】知识点合集
- 利用arcgis进行excel数据的空间相关性分析
热门文章
- python冒泡排序代码和注释_python代码求助(两个实验任务,尽量写出注释~)
- boost operator 实例代码
- 1002.ubuntu系统级BUG-/dev/ttyUSB0
- php gettext 为空,PHP Gettext
- python算法应用(八)——优化
- linux内核PID管理
- linux多线程学习(七)——实现“生产者和消费者”
- Linux netfilter源码分析(5)
- 华南理工计算机研究生专业课,华南理工大学(专业学位)计算机技术研究生考试科目和考研参考书目...
- 【JUC】第三章 多线程锁、CallableFuture 接口