概述

运用html5新增画布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时钟效果的更多相关文章

  1. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  2. 分享一个自己写的基于canvas的原生js图片爆炸插件

    DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...

  3. 原生js动画效果(源码解析)

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  4. vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  5. 基于Canvas的Char.js库使用

    Chart.js是基于Html5 Canvas的图表库. 官网:http://www.chartjs.org/ 參考文档:http://www.chartjs.org/docs/ 支持六种图表,相应源 ...

  6. Canvas画布实现自定义时钟效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 基于canvas+ajax+zui.js的蓄电池监控系统

    今天抽空做的,仪表盘用canvas做的,数据采用ajax刷新,左边菜单用zui.js做的

  8. 用canvas和原生js写的一个笨鸟先飞的小游戏(暂时只有一个关卡)

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

  9. 原生js手风琴效果

    //js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历  排他 for( var i=0;i&l ...

随机推荐

  1. php 安装 Redis 扩展

    开发环境安装包为:wamp3.1.0,安装成功后 wamp/bin 目录下有php以下几个版本: 这里以php7.1.9为例进行redis扩展安装,其他php版本也是一样的. 进行安装 step 1: ...

  2. MSChart使用小结

        在用到图表展示某项.多项信息的统计情况,很正常联想到MSChart控件.        以VS2008开发为例,在工具箱也中右击,选择”choose items“,打开对话框,选择COM组件T ...

  3. React Native中树 TreeView 实现(2)

    接上文,剩下的展示工作是重中之重,首先确定节点的布局草稿——也就是如何render item: 在此之前还有一个重要的问题就是选择何种组件盛放展示子结点,一般有如下两种: 使用scrollview加载 ...

  4. Maven:Generating Project in Batch mode 卡住问题

    Maven命令执行到Generating Project in Batch mode 卡住,原因是网络带宽不足问题!需要下载一个约4.1M的archetype-catalog.xml文件. Maven ...

  5. source insight 设置自动缩进

    转:http://biancheng.dnbcw.info/c/283027.html 使用source insight 的时候一直被一个问题困扰着:就是在 {  后如果敲下回车后,光标换行后,但没有 ...

  6. 解决kylin查询报错:org.apache.kylin.rest.exception.InternalErrorException

    报错信息: -- ::, ERROR [Query 12e9c054-760c---b1f06724c9b6-] service.QueryService: : Exception when exec ...

  7. Page的ResolveClientUrl与ResolveUrl读取路径

    Page的ResolveClientUrl与ResolveUrl读取路径 . 一.Page对象的ResolveClientUrl与ResolveUrl Page.ResolveClientUrl(): ...

  8. CSS学习要点

    目标 掌握CSS基本语法,了解如何应用CSS到Html元素上并能熟练使用CSS进行元素布局. 要点 CSS基本概念.存在的意义 CSS 指层叠样式表 (Cascading Style Sheets), ...

  9. QT在windows下的安装与配置

    先了解Qt: Qt一直以来,分为商业.开源两个版本,商业版本为用户提供了二级制的动态库,直接安装既可以使用,但是需要花钱购买license,而开源版本则遵守GPL协议,提供了源码,用户需要自行编译,才 ...

  10. 移植QT5.6到嵌入式开发板(史上最详细的QT移植教程)

    目前网上的大多数 QT 移植教程还都停留在 qt4.8 版本,或者还有更老的 Qtopia ,但是目前 Qt 已经发展到最新的 5.7 版本了,我个人也已经使用了很长一段时间的 qt5.6 for w ...