您的位置：首页 > Web前端 > JavaScript

使用canvas绘制风景时钟

2017-12-19 15:59 513 查看
风景时钟



实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.content{
width: 600px;
height: 600px;
border: 1px solid green;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
<canvas id="canvas" width="600" height="600"></canvas>
</div>
<script>

var canvas = document.querySelector("#canvas");
var cxt = canvas.getContext("2d");
var img=new Image();
img.src="img/1.jpg";
img.onload=function(){
clock();
setInterval(clock,1000);

};
function clock(){
//获取当前时间
var date = new Date();
var h = date.getHours();
h = h>=12?h-12:h;
var m = date.getMinutes();
var s = date.getSeconds();
h += m / 60;

//将圆心坐标移到中心位置
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
cxt.translate(300,300);

//绘制表盘
cxt.beginPath();
cxt.arc(0,0,280,0,2*Math.PI);
cxt.lineWidth="10";
cxt.strokeStyle="blue";
cxt.stroke();
cxt.closePath();

cxt.clip();
cxt.drawImage(img,-280,-280,600,600);
img.onload=function(){
cxt.drawImage(img,0,0)
};
//绘制分刻度

for(var i=0;i<60;i++){
cxt.save();
cxt.rotate(Math.PI*2/360*6*i);
cxt.beginPath();
cxt.moveTo(0,-260);
cxt.lineTo(0,-274);
cxt.strokeStyle="yellow";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//绘制时刻度

for(var i=0;i<12;i++){
cxt.save();
cxt.rotate(Math.PI*2/360*30*i);
cxt.beginPath();
cxt.moveTo(0,-250);
cxt.lineTo(0,-274);
cxt.strokeStyle="yellow";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//绘制时针
cxt.save();
cxt.rotate(Math.PI/180*30*h);
cxt.beginPath();
cxt.moveTo(0,20);
cxt.lineTo(0,-140);
cxt.lineWidth="12";
cxt.strokeStyle="rgb(9,0,82)";
cxt.stroke();
cxt.closePath();
cxt.restore();
//绘制分针
cxt.save();
cxt.rotate(Math.PI/180*6*m);
cxt.beginPath();
cxt.moveTo(0,20);
cxt.lineTo(0,-160);
cxt.lineWidth="10";
cxt.strokeStyle="rgb(98,255,116)";
cxt.stroke();
cxt.closePath();
cxt.restore();
//绘制秒针

cxt.save();
cxt.rotate(Math.PI/180*6*s);
cxt.beginPath();
cxt.moveTo(0,20);
cxt.lineTo(0,-200);
cxt.lineWidth="5";
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();

//绘制秒针上的小圆
cxt.beginPath();
cxt.arc(0,-160,7,0,2*Math.PI);
cxt.fillStyle="yellow";
cxt.lineWidth="5";
cxt.fill();
cxt.stroke();
cxt.closePath();
//绘制圆心上的圆
cxt.beginPath();
cxt.arc(0,0,7,0,2*Math.PI);
cxt.fillStyle="yellow";
cxt.lineWidth="5";
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.restore();
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas html javascript html5
相关文章推荐
新的分享
章节导航