s时钟画布 android,Canvas画布实现自定义时钟效果

标题

*{margin:0; padding:0; list-style:none;}

.box{

width: 420px;

height: 420px;

margin: 50px auto 0;

}

#cvs{

background: #B1A6BE;

}

var cvs=document.getElementById('cvs');

var ctx=cvs.getContext('2d');

clock();

setInterval(clock,1000);

function clock(){

var img=document.createElement('img');

img.src='01.jpg';

//时钟背景图

// img.οnlοad=function (){

ctx.beginPath();

ctx.drawImage(img,0,0,420,420);

ctx.closePath();

// }

//时钟外圆

ctx.beginPath();

ctx.arc(210,210,200,0,2*Math.PI,true);

ctx.strokeStyle='#60D9F8';

ctx.lineWidth=10;

ctx.stroke();

ctx.clip();

ctx.closePath();

//分刻度 360/60=6

for (var i = 0; i < 60; i++) {

ctx.save();//保存状态

ctx.beginPath();

ctx.translate(210,210);

ctx.rotate(i*6*Math.PI/180);

ctx.strokeStyle='#FEF319';

ctx.lineWidth=5;

ctx.moveTo(0,-185);

ctx.lineTo(0,-195);

ctx.stroke();

ctx.closePath();

ctx.restore();//恢复之前保存的状态

};

//时刻度 360/12=30

for (var i = 0; i < 12; i++) {

ctx.save();//保存状态

ctx.beginPath();

ctx.translate(210,210);

ctx.rotate(i*30*Math.PI/180);

ctx.strokeStyle='#60D9F8';

ctx.lineWidth=8;

ctx.moveTo(0,-175);

ctx.lineTo(0,-195);

ctx.stroke();

ctx.closePath();

ctx.restore();//恢复之前保存的状态

};

//获取当前时间

var dates=new Date();

var h=dates.getHours();

var m=dates.getMinutes();

var s=dates.getSeconds();

h=h+m/60;//12.5小时

m=m+s/60;

//画时间

var h2=dates.getHours();

var m2=dates.getMinutes();

var str1=h2>9?h2:'0'+h2;

var str2=m2>9?m2:'0'+m2;

var str=str1+':'+str2;// 09:05

ctx.beginPath();

ctx.font='26px 微软雅黑';

ctx.fillStyle='#5BDA40';

ctx.fillText(str,180,340);

ctx.closePath();

//时针

ctx.save();//保存状态

ctx.beginPath();

ctx.translate(210,210);

ctx.rotate(h*30*Math.PI/180);

ctx.strokeStyle='#60D9F8';

ctx.lineWidth=8;

ctx.moveTo(0,14);

ctx.lineTo(0,-130);

ctx.stroke();

ctx.closePath();

ctx.restore();//恢复之前保存的状态

//分针

ctx.save();//保存状态

ctx.beginPath();

ctx.translate(210,210);

ctx.rotate(m*6*Math.PI/180);

ctx.strokeStyle='#FEF319';

ctx.lineWidth=5;

ctx.moveTo(0,14);

ctx.lineTo(0,-150);

ctx.stroke();

ctx.closePath();

ctx.restore();//恢复之前保存的状态

//秒针

ctx.save();//保存状态

ctx.beginPath();

ctx.translate(210,210);

ctx.rotate(s*6*Math.PI/180);

ctx.strokeStyle='#FB1F11';

ctx.lineWidth=3;

ctx.moveTo(0,14);

ctx.lineTo(0,-170);

ctx.stroke();

ctx.closePath();

//秒针上的圆

ctx.beginPath();

ctx.fillStyle='#FEF319';

ctx.strokeStyle='#FB1F11';

ctx.lineWidth=3;

ctx.arc(0,-155,5,0,2*Math.PI,true);

ctx.fill();

ctx.stroke();

ctx.closePath();

//中心圆

ctx.beginPath();

ctx.fillStyle='#FEF319';

ctx.strokeStyle='#FB1F11';

ctx.lineWidth=3;

ctx.arc(0,0,8,0,2*Math.PI,true);

ctx.fill();

ctx.stroke();

ctx.closePath();

ctx.restore();//恢复之前保存的状态

}

基于canvas的原生JS时钟效果

概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

canvas实现的时钟效果

最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

Particles&period;js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

更新——Canvas画布动画效果之实现倒计时

Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

CANVAS画布与SVG的区别

CANVAS是html5提供的新元素,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

用html5的canvas画布绘制贝塞尔曲线

查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: /p>

transform实现的时钟效果

又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

关于使用Css设置Canvas画布大小的问题

问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

&OpenCurlyDoubleQuote;canvas画布仿window系统自带画图软件&quot&semi;项目的思考

"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

随机推荐

ionic实现双击返回键退出功能

实现这个功能需要四个步骤: 步骤一: 说明:因为需要和手机的硬件(返回按钮)打交道,而ionic本身是不具备该功能的,但是有一个东西可以:ng-cordova插件,这个插件是phoneGap为了能让i ...

c&num;实现数据的左补右补功能

///         /// 左補右補功能        ///         ///