canvas的实例--时钟动画-H5教程-PHP中文网

首页

web前端

H5教程

canvas的实例--时钟动画

PHP中文网

Jun 20, 2017 pm 01:43 PM

canvas动画时钟

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

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

直接上代码：

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?1.1.10"></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,
    }
}())

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

以上是canvas的实例--时钟动画的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

H5：如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1）多媒体支持：H5的和元素简化开发，提升用户体验。2）离线存储：WebStorage和IndexedDB允许离线使用，提升体验。3）性能优化：WebWorkers和元素优化性能，减少带宽消耗。

解构H5代码：标签，元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成：1.标签定义内容类型，用尖括号包围，如。2.元素由开始标签、内容和结束标签组成，如内容。3.属性在开始标签中定义键值对，增强功能，如。这些是构建网页结构的基本单位。

了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles