用html5弄的一个电子时钟

用html5弄的一个电子时钟,纠结啊!~ 还没弄完整,编程现在的这个样式!~

输入代码:

——————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5绘制比较复杂的图形!–逐渐增加的圆</title>
<meta charset=”UTF-8″>
<script>
function draw(context){
var myTime=document.getElementById(“myTime”);
var getTime=new Date();
var hour=getTime.getHours();
var minute=getTime.getMinutes();
var second=getTime.getSeconds();
var showTime=hour+”:”+minute+”:”+second;
myTime.innerHTML=showTime;
context.moveTo(0,0);
context.lineWidth=1;
var H=100*Math.sin(6*second);
var W=100*Math.cos(6*second);
context.lineTo(H,W);
context.stroke();
}

function drawArc(context){
context.fillStyle=”#eeeeee”;
context.fillRect(0,0,400,300);
//这个填充canvas的整个背景色
//图像的绘制
context.translate(200,150);//这是将绘制的开始点移动到中部
context.strokeStyle=’rgba(255,0,0,0.5)’;
context.arc(0,0,100.2,0,Math.PI*2,false);
}
function init(){
var canvas=document.getElementById(“my”);
var context=canvas.getContext(“2d”);
drawArc(context);
setInterval(function(){draw(context);},1000);
}
window.addEventListener(“load”,init,true);
</script>
</head>

<body>
<center>
使用html5绘制变形的图像!~<br/><br/>
<h1><a href=”http://www.yugaga.com”><font color=”green”>记住我们娱嘎嘎</font></a><h1>
<canvas id=”my” width=”400″ height=”300″ style=”border:solid 1px green;”>额,浏览器不支持,你挺落后的</canvas>
<div id=”myTime”></div>
<center>
</body>
</html>

——————————————————————————————————

现在的截图:

演示地址:shizhong1

共有 0 条评论

Top