JavaSript及HTML5CANVAS实现钟表动画的讲解

用HTML5及JavaScript实现钟表的动画时，关键的地方是save和restore的恰当应用。
闲言少叙，直接上代码
可以在里插入属性:

注意setInterval引用的是函数名。。

```javascript function myFun(){ clock(); setInterval(clock,1000); //每间隔一秒调用一次； } function clock(){ var mycan = document.querySelector("#myCanvas"); var ctx = mycan.getContext('2d'); ctx.save(); //**第一个save; 这个必须保存，否则在setInterval的下一次调用时，会在以前的context基础上进行。**

  ctx.clearRect(0,0,600,400);ctx.translate(300,200);ctx.rotate(-1*Math.PI/2);ctx.strokeStyle="red";ctx.fillStyle = "red";ctx.save();  //第二个save();必须保存ctx.beginPath();     //必须有,否则会以后续的troke或则fill的特性绘制路径.ctx.arc(0,0,5,0,2*Math.PI);ctx.fill();ctx.beginPath();  //想改变图形而特征,必须有这个,否则后续以最后设置的特性绘制;for(let i = 0;i < 12 ;i++){ctx.rotate(Math.PI/6);ctx.moveTo(0,100);ctx.lineTo(0,120);ctx.stroke(); //在documeng上绘制已经构建完成的路径;}ctx.restore(); //将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响ctx.save(); //必须,重新将第二个特性压入桟......ctx.beginPath();ctx.strokeStyle="green";for(let j = 0;j<60;j++){if(j %5 !== 0){ctx.moveTo(0,104);ctx.lineTo(0,116);ctx.stroke();}ctx.rotate(Math.PI/30);}ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响ctx.save();//必须,重新将第二个特性压入桟......//以下代码画指针:时针、分针、秒针;var time = new Date();var hr = time.getHours();var min = time.getMinutes();var sec = time.getSeconds();//画时针ctx.lineWidth = 6;ctx.beginPath();ctx.rotate(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);ctx.moveTo(0,0);ctx.lineTo(80,0);ctx.stroke();ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响ctx.save(); //必须,重新将第二个特性压入桟......//画分针ctx.beginPath();ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*sec);ctx.moveTo(0,0);ctx.lineTo(98,0);ctx.stroke();ctx.restore();//将第二个save调出来; 桟里不再用第二个save保存的特性.必须,消除上一个路径的影响ctx.save(); //必须,重新将第二个特性压入桟......//画秒针ctx.beginPath()ctx.rotate(Math.PI/30 * sec);ctx.moveTo(0,0);ctx.lineTo(120,0);ctx.stroke();ctx.restore(); //将第二个save调出来; 桟里不再用第二个save保存的特性ctx.restore();//将第一个save调出来; 桟里不再用第一个save保存的特性,可以不调.ctx.font= "30px Arial";ctx.fillText(hr+":"+min+":"+sec,240,240);}

JavaSript及HTML5CANVAS实现钟表动画的讲解相关推荐

Android动画（帧动画、补间动画、属性动画）讲解
Android动画(帧动画.补间动画.属性动画)讲解首先我们来看看啥是帧动画.补间动画.属性动画. 介绍: 帧动画:是一种常见的动画形式(Frame By Frame),其原理是在"连续的 ...
python实现钟表动画展示turtle库使用
python实现钟表动画展示turtle库使用注释都很详细的代码如下: # coding=utf-8 import turtlefrom datetime import * # 抬起画笔,向前运动 ...
mos管工作原理动画图讲解_MOS管工作原理电路图简述【通俗易懂】
mos管工作原理动画图讲解_MOS管工作原理电路图简述[通俗易懂] 发布时间:2020-01-18 09:06人气:461 很多朋友对mos管原理都不是太了解,今天小编就给各位普及一下关于MOS管工作 ...
模型的骨骼动画技术讲解
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
android 载入svg动画,实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画,现在移动端网页使用比较多,若还用GIF做loading图片的话,可能会影响图像的质量,所以使用SVG是一个不错的方式. 这次展示的代码由 A ...
520 抖音哄女友图片动画+详细讲解
效果的实现其实只依赖CSS3的"3D转换","动画"和"过渡" 1. css部分 .container{width:800px;height ...
iOS自定义转场动画实战讲解
转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completio ...
js 获得明天0点时间戳_js实现一个简单钟表动画(javascript+html5 canvas)
自己学生时代的代码,发现还保存着,今天拿出来分享下. 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的 ...
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战（附源码和演示视频简单易懂）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...

JavaSript及HTML5CANVAS实现钟表动画的讲解

JavaSript及HTML5CANVAS实现钟表动画的讲解相关推荐

最新文章

热门文章