canvas 时钟动画

平时在公司不忙的时候，就喜欢写一些小效果什么的，一来复习复习，二来可以发现一些问题。

今天在群里看别人发了一手表的图片，卧槽...妥妥的工作好多年的节奏，后来想想还是做好自己的事情算了，想那多干啥，就画了一个手表....

效果图，没有录制gif的

直接上代码：

html

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>canvas clock</title><script type="text/javascript" src="percent.js"></script></head><body><canvas id="canvas" width="600" height="600"></canvas></body>
</html>
<script type="text/javascript">clock.canvasClock();
</script>

var clock=(function(){function _canvasClock(){var cvs=document.getElementById('canvas');var ctx=cvs.getContext('2d');var PI=Math.PI;var lineWidth=5;                                             //线宽var gradient=ctx.createLinearGradient(10,10,580,580);        //设置圆的颜色渐变gradient.addColorStop("0","#a251ff");gradient.addColorStop(1,"#2ec2ff");ctx.fillStyle = '#ef6670';ctx.fillRect(0,0,600,600);var drawBig=function(){var time=new Date();var second=time.getSeconds();                            //秒var Minute=time.getMinutes();                            //分var hour=time.getHours();                                //时//hour=hour+Minute/60;hour=hour>12?hour-12:hour;                               //表盘只有12小时
            ctx.clearRect(0,0,600,600);                              //清空给定矩形内的指定像素//画圆
            ctx.beginPath();ctx.lineWidth=lineWidth;ctx.strokeStyle=gradient;ctx.arc(300,300,290,0, PI * 2,false);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.lineWidth=lineWidth;ctx.strokeStyle=gradient;ctx.arc(300,300,10,0, PI * 2,false);ctx.stroke();ctx.closePath();for(var i=0;i<60;i++){  ctx.save();                        　//保存之前画布状态   ctx.lineWidth=4;                　　 //设置分针的粗细                 ctx.strokeStyle="#616161";          //设置分针的颜色                 ctx.translate(300,300);             //画布圆点设置        ctx.rotate(i*PI/30);                //角度*Math.PI/180=弧度,设置旋转角度 ctx.beginPath();                    //开始一条路径ctx.moveTo(0,-287);                 //相对画布圆点路径的起点ctx.lineTo(0,-283);                 //相对画布圆点路径的终点ctx.closePath();                    //结束一条路径ctx.stroke();                       //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径ctx.restore();                      //restore() 方法将绘图状态置为保存值
            }for(var i=0;i<12;i++){ctx.save();ctx.lineWidth=4;ctx.strokeStyle=gradient;    ctx.translate(300,300);   ctx.rotate(i*PI/6);
                ctx.beginPath();  ctx.moveTo(0,-287);ctx.lineTo(0,-278); ctx.closePath();  ctx.stroke();  ctx.restore();  }//时针
            ctx.save();           ctx.lineWidth=3;                  ctx.strokeStyle="#0f0f0f";                ctx.translate(300,300);ctx.rotate(hour*PI/6+second*PI/108000);  ctx.beginPath();  ctx.moveTo(0,-238);ctx.lineTo(0,10);  ctx.closePath();  ctx.stroke();  ctx.restore();  //分针
            ctx.save();  ctx.lineWidth=3;  ctx.strokeStyle="#010101";  ctx.translate(300,300);  ctx.rotate(Minute*PI/30+second*PI/1800);  ctx.beginPath();  ctx.moveTo(0,-258);  ctx.lineTo(0,15);  ctx.closePath();  ctx.stroke();ctx.restore();  //秒针
            ctx.save();  ctx.strokeStyle="#ff100d";  ctx.lineWidth=3;  ctx.translate(300,300);               ctx.rotate(second*PI/30);
            ctx.beginPath();ctx.moveTo(0,-278);  ctx.lineTo(0,20);  ctx.closePath();  ctx.stroke();  ctx.beginPath();                        //时针分针秒针交点  ctx.arc(0,0,6,0,2*PI,false);ctx.closePath();                  ctx.fillStyle="#fff";ctx.fill();               ctx.stroke();     ctx.restore();  requestAnimationFrame(drawBig);            //实现动画修改的接口
        };drawBig();setInterval(drawBig,1000);                    //每1s重绘一次
    };return{canvasClock:_canvasClock,}
}())

本来准备封装一下的，要下班时来任务了，飞了....

转载于:https://www.cnblogs.com/sk-3/p/7002443.html

canvas 时钟动画相关推荐

css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析
本文作者html5tricks,转载请注明出处在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个 ...
14款形态各异的超时尚HTML5时钟动画
14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...
14款超时尚的HTML5时钟动画
时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...
网页版时钟动画效果 html模板
即时时间展示,HTML模板,网页版时钟动画首先看图:在线演示然后看>>> <!doctype html> <html> <head> < ...
html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下: var clock=document.getElementById("clock"); var ...
canvas粒子动画
2019独角兽企业重金招聘Python工程师标准>>> 周末在家玩了一下canvas粒子动画,先看看效果,用的图是我们微众银行的干爹'qq',先看看效果 ##1.获取图片信息 ### ...
教你实现一个朴实的Canvas时钟效果
摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的. 本文分享自华为云社区<如何实现一个朴实无华的Canvas时钟效果>,作者: 北极光之夜.. 一. ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...

canvas 时钟动画

canvas 时钟动画相关推荐

最新文章

热门文章