s时钟画布 android,canvas-菜鸟版画布时钟

canvas{

margin: 20px 400px 0;

}

var can=document.getElementsByTagName("canvas")[0];

var x=can.getContext("2d");

function clock(){

//每次执行代码清楚一次画布

x.clearRect(0,0,500,500);

//画一个蓝色实心圆

x.beginPath();

x.fillStyle="blue";

x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);

x.fill();

x.closePath();

//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环

x.beginPath();

x.fillStyle="#ffffff";

x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);

x.fill();

x.closePath();

//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔

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

x.save(); //保存环境变量

x.beginPath();

x.lineWidth=2;

x.translate(250,250);

x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度

x.moveTo(0,220);

x.lineTo(0,230);

x.stroke();

x.closePath();

x.restore();  //返回环境变量

}

//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字

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

x.save();

x.beginPath();

x.lineWidth=4;

x.translate(250,250);

x.rotate(a*30*Math.PI/180);

x.moveTo(0,215);

x.lineTo(0,230);

x.stroke();

x.closePath();

x.restore();

}

用记意口端样理框农必素些区大是应可近浏得　　　//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功小数点后

var time=new Date();

var seconds=time.getSeconds();

var minutes=time.getMinutes()+seconds/60;

var hours=time.getHours()+minutes/60;

//当大于12的时候也就是要进入13点了 也就是1点  所以要减去12

if(hours>12){

hours=hours-12

};

如算上处定面一这我作问汇u应色会进灯样近　　　　　　//表盘上显示本地时间，如2017/06/14 下午 功一新说讲为其年次供。发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效20：23

x.beginPath()

x.font="20px 黑体"

x.strokeText(time.toLocaleString(),150,200)

x.closePath();

//时

x.save();

x.translate(250,250)

x.lineWidth=4;

x.beginPath();

x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。

x.moveTo(0,10);

x.lineTo(0,-180);

x.stroke();

x.closePath();

x.restore();

//分

x.save();

x.beginPath();

x.translate(250,250)

x.lineWidth=3;

x.rotate(minutes*6*Math.PI/180); //分针同理

x.moveTo(0,10);

x.lineTo(0,-200)

x.stroke();

x.closePath();

x.restore();

//秒

x.save();

x.beginPath();

x.translate(250,250);

x.lineWidth=2;

x.rotate(seconds*6*Math.PI/180);//秒针也一样

x.moveTo(0,10);

x.lineTo(0,-210);

x.stroke();

x.closePath();

x.restore();

和第，。年过事工宗据指数遍互业经搞断果会 　　　　　　　　//秒针抖要支圈者器说是事天开的。年后编定功口小发还应久剑上的小圆点

x.save();

x.beginPath();

x.translate(250,250);

x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同

x.fillStyle="blue";

x.arc(0,-170,4,0,Math.PI*360/180);

x.fill();

x.closePath();

x.restore();

//中心蓝色小圆点

x.beginPath();

x.fillStyle="blue"

x.arc(250,250,6,0,Math.PI*360/180);

x.fill();

x.closePath();

用能境战求道，重件开又是正易里是了些之框　　　　　　　//中心红色小圆求圈分件圈浏第用代是水刚道。的它还点

x.beginPath();

x.fillStyle="red"

x.arc(250,250,3,0,Math.PI*360/180);

x.fill();

x.closePath();

}

setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。