如何使用html5的画布画出时钟_随笔

代码：

var clock=document.getElementById("clock")

var cxt=clock.getContext("2d")

function drawNow(){

var now=new Date()

var hour=now.getHours()

var min=now.getMinutes()

var sec=now.getSeconds()

hour=hour>12?hour-12:hour

hour=hour+min/60

//表盘(蓝色)

cxt.lineWidth=10

cxt.strokeStyle="blue"

cxt.beginPath()

cxt.arc(250,250,200,0,360,false)

cxt.closePath()

cxt.stroke()

//刻度

//时刻度

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

cxt.save()

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(i*30*Math.PI/180)//旋转角度角度*Math.PI/180=弧度

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//分刻度

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

cxt.save()

//设置分刻度的粗细

cxt.lineWidth=5

//重置画布原点

cxt.translate(250,250)

//设置旋转角度

cxt.rotate(i*6*Math.PI/180)

//画分针刻度

cxt.strokeStyle="black"

cxt.beginPath()

cxt.moveTo(0,-180)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//时针

cxt.save()

// 设置时针风格

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(hour*30*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-140)

cxt.lineTo(0,10)

cxt.closePath()

cxt.stroke()

cxt.restore()

//分针

cxt.save()

cxt.lineWidth=5

cxt.strokeStyle="black"

//设置异次元空间分针画布的中心

cxt.translate(250,250)

cxt.rotate(min*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-160)

cxt.lineTo(0,15)

cxt.closePath()

cxt.stroke()

cxt.restore()

//秒针

cxt.save()

//设置秒针的风格

//颜色:红色

cxt.strokeStyle="red"

cxt.lineWidth=3

//重置原点

cxt.translate(250,250)

//设置角度

//cxt.rotate(330*Math.PI/180)

cxt.rotate(sec*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,20)

cxt.closePath()

cxt.stroke()

//画出时针,分针,秒针的交叉点

cxt.beginPath()

cxt.arc(0,0,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()

//画出秒针的小圆点

cxt.beginPath()

cxt.arc(0,-140,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()</p>

<p> cxt.restore()</p>

<p>}

function drawClock(){

cxt.clearRect(0,0,500,500)

drawNow()

}

drawNow()

setInterval(drawClock,1000)

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

#box{width:206pxheight:206px margin:80px auto position:relative}

#dial{height:200pxborder:3px solid #000 border-radius:103px position:relative}

#box span{ width:2pxheight:6pxbackground:#666 position:absoluteleft:99pxtop:0-webkit-transform-origin:0 100px}

#hand{ width:12pxheight:12px position:absoluteleft:97pxtop:97px}

#hour{ width:4px height:45pxbackground:#000 position:absoluteleft:4pxbottom:6px -webkit-transform-origin:bottom}

#min{width:2pxheight:60pxbackground:#666 position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}

#sec{width:2pxheight:75pxbackground:red position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}

#centre{height:12pxborder-radius:9pxbackground:#000 position:relative}

#dial span:nth-of-type(5n+1){height:10pxbackground:#000}

</style>

window.onload=function()

{

var oDial=document.getElementById("dial")

var oHour=document.getElementById("hour")

var oMin=document.getElementById("min")

var oSec=document.getElementById("sec")

toDial(oDial)

toTime(oHour,oMin,oSec)

setInterval(function(){

toTime(oHour,oMin,oSec)

},1000)

}

function toTime(oHour,oMin,oSec)

{

var oDate=new Date()

var iSec=oDate.getSeconds()

var iMin=oDate.getMinutes()+iSec/60

var iHour=(oDate.getHours()%12)+iMin/60

oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)"

oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)"

oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)"

}

function toDial(obj)

{

var sHtml=""

var iDeg=6

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

{

sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>"

}

obj.innerHTML=sHtml

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7069520.html

如何使用html5的画布画出时钟

发表评论

评论列表（0条）