基于canvas的原生JS时钟效果
概述
详细
给大家介绍一个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.onload=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(* ̄▽ ̄*)ブ!!
注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
基于canvas的原生JS时钟效果的更多相关文章
- 基于canvas与原生JS的H5动画引擎
前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...
- 分享一个自己写的基于canvas的原生js图片爆炸插件
DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...
- 原生js动画效果(源码解析)
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 基于Canvas的Char.js库使用
Chart.js是基于Html5 Canvas的图表库. 官网:http://www.chartjs.org/ 參考文档:http://www.chartjs.org/docs/ 支持六种图表,相应源 ...
- Canvas画布实现自定义时钟效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于canvas+ajax+zui.js的蓄电池监控系统
今天抽空做的,仪表盘用canvas做的,数据采用ajax刷新,左边菜单用zui.js做的
- 用canvas和原生js写的一个笨鸟先飞的小游戏(暂时只有一个关卡)
其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...
- 原生js手风琴效果
//js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历 排他 for( var i=0;i&l ...
随机推荐
- php 安装 Redis 扩展
开发环境安装包为:wamp3.1.0,安装成功后 wamp/bin 目录下有php以下几个版本: 这里以php7.1.9为例进行redis扩展安装,其他php版本也是一样的. 进行安装 step 1: ...
- MSChart使用小结
在用到图表展示某项.多项信息的统计情况,很正常联想到MSChart控件. 以VS2008开发为例,在工具箱也中右击,选择”choose items“,打开对话框,选择COM组件T ...
- React Native中树 TreeView 实现(2)
接上文,剩下的展示工作是重中之重,首先确定节点的布局草稿——也就是如何render item: 在此之前还有一个重要的问题就是选择何种组件盛放展示子结点,一般有如下两种: 使用scrollview加载 ...
- Maven:Generating Project in Batch mode 卡住问题
Maven命令执行到Generating Project in Batch mode 卡住,原因是网络带宽不足问题!需要下载一个约4.1M的archetype-catalog.xml文件. Maven ...
- source insight 设置自动缩进
转:http://biancheng.dnbcw.info/c/283027.html 使用source insight 的时候一直被一个问题困扰着:就是在 { 后如果敲下回车后,光标换行后,但没有 ...
- 解决kylin查询报错:org.apache.kylin.rest.exception.InternalErrorException
报错信息: -- ::, ERROR [Query 12e9c054-760c---b1f06724c9b6-] service.QueryService: : Exception when exec ...
- Page的ResolveClientUrl与ResolveUrl读取路径
Page的ResolveClientUrl与ResolveUrl读取路径 . 一.Page对象的ResolveClientUrl与ResolveUrl Page.ResolveClientUrl(): ...
- CSS学习要点
目标 掌握CSS基本语法,了解如何应用CSS到Html元素上并能熟练使用CSS进行元素布局. 要点 CSS基本概念.存在的意义 CSS 指层叠样式表 (Cascading Style Sheets), ...
- QT在windows下的安装与配置
先了解Qt: Qt一直以来,分为商业.开源两个版本,商业版本为用户提供了二级制的动态库,直接安装既可以使用,但是需要花钱购买license,而开源版本则遵守GPL协议,提供了源码,用户需要自行编译,才 ...
- 移植QT5.6到嵌入式开发板(史上最详细的QT移植教程)
目前网上的大多数 QT 移植教程还都停留在 qt4.8 版本,或者还有更老的 Qtopia ,但是目前 Qt 已经发展到最新的 5.7 版本了,我个人也已经使用了很长一段时间的 qt5.6 for w ...