<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="1000" height="1000" style="border: 1px solid;">
</canvas>
<script type="text/javascript">
var can = document.getElementById("mycanvas");
var cxt = can.getContext("2d");
function drawbase(){
cxt.beginPath();
cxt.rect(100,300,400,300);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.moveTo(100,300);
cxt.bezierCurveTo(110,30,490,30,500,300);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.moveTo(470,190);
cxt.quadraticCurveTo(480,50,495,260);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.arc(300,200,90,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
//表盘刻度 时刻度
cxt.save()
cxt.translate(300,200);
for(var i = 0; i<12; i++){
cxt.rotate(Math.PI/6);
cxt.beginPath();
cxt.moveTo(0,-90);
cxt.lineTo(0,-80);
cxt.stroke();
cxt.closePath();
}
cxt.restore();
//分刻度
cxt.save()
cxt.translate(300,200);
for(var i = 0; i<60; i++){
cxt.rotate(Math.PI/30);
cxt.beginPath();
cxt.moveTo(0,-90);
cxt.lineTo(0,-85);
cxt.stroke();
cxt.closePath();
}
cxt.restore();
}
//钟摆
var b = 0;
function zb(){
if(b==0){
cxt.beginPath();
cxt.moveTo(300,300);
cxt.lineTo(200,500);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.arc(200,500,10,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
b = 1;
}else{
cxt.beginPath();
cxt.moveTo(300,300);
cxt.lineTo(400,500);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.arc(400,500,10,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
b = 0;
}
}
//冒烟
var y = 0;
function maoy(){
if(y==0){
cxt.beginPath();
cxt.arc(480,50,10,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
y = 1;
}else{
cxt.beginPath();
cxt.arc(480,80,10,0,Math.PI*2,true);
cxt.fill();
cxt.closePath();
y = 0;
}
}
//指针
function clock(){
var date = new Date();
var second = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours();
//秒针
cxt.save();
cxt.translate(300,200);
cxt.rotate(second*Math.PI/30);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-75);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();
cxt.translate(300,200);
cxt.rotate(min*Math.PI/30);
cxt.beginPath();
cxt.moveTo(0,5);
cxt.lineTo(0,-70);
cxt.stroke();
cxt.closePath();
cxt.restore();
//时针
cxt.save();
cxt.translate(300,200);
cxt.rotate((hour+min/60)*Math.PI/6);
cxt.beginPath();
cxt.moveTo(0,5);
cxt.lineTo(0,-65);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
function draw(){
cxt.clearRect(0,0,1000,800);
drawbase();
zb();
maoy();
clock();
}
draw();
setInterval(draw,1000);
</script>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
