<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
display: block;
margin: 0 auto;
background-color: #eee;
}
</style>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" ></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width / 2;
function fun(){
context.save()
// 把canvas的中心点变成00点,方便计算
context.translate(r,r);
// 开始绘制大圆
context.beginPath();
context.lineWidth = 10
context.arc(0,0,r-5,0,Math.PI * 2);
context.closePath();
context.stroke()
// 开始绘制数字
var hournums = [3,4,5,6,7,8,9,10,11,12,1,2]; //存放小时数的数组
context.font = "20px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
for(var i = 0;i < hournums.length;i++){
var rad = Math.PI * 2 / 12 * i; //获取当前的弧度
var x = Math.cos(rad) * (r - 30);
var y = Math.sin(rad) * (r - 30);
context.fillText(hournums[i],x,y)
}
for(var j = 0;j < 60;j++){
var radd = Math.PI * 2 / 60 * j;
var x1 = Math.cos(radd) * (r - 15)
var y1 = Math.sin(radd) * (r - 15)
context.beginPath();
if(j % 5 == 0){
context.fillStyle = "#000";
}else{
context.fillStyle = "#aaa";
}
context.arc(x1,y1,2,0,Math.PI * 2);
context.closePath();
context.fill()
}
}
function drawHour(hour,minu){
// 绘制之前先把环境进行保存
context.save();
context.beginPath();
// 把旋转所对应的弧度计算
var rad = Math.PI * 2 / 12 * hour;
// 计算出分钟所带来的影响
var mrad = Math.PI * 2 / 12 / 60 * minu;
context.lineWidth = 8;
context.lineCap = "round";
context.rotate(rad + mrad);
context.moveTo(0,10);
context.lineTo(0,-r/2);
context.stroke();
// 绘制完成以后,再恢复以前的状态
context.restore();
}
function drawMinu(minu){
// 绘制之前先把环境进行保存
context.save();
context.beginPath();
// 把旋转所对应的弧度计算
var rad = Math.PI * 2 / 60 * minu;
context.lineWidth = 4;
context.lineCap = "round";
context.rotate(rad);
context.moveTo(0,10);
context.lineTo(0,-r + 38);
// context.closePath();
context.stroke();
// 绘制完成以后,再恢复以前的状态
context.restore();
}
function drawSec(sec){
context.save();
context.beginPath();
var rad = Math.PI * 2 / 60 * sec;
context.rotate(rad);
context.fillStyle = "red";
context.moveTo(-2,30);
context.lineTo(2,30);
context.lineTo(1,-r + 18);
context.lineTo(-1,-r+18);
context.fill();
context.restore()
}
function drawD(){
context.beginPath();
context.fillStyle = "#fff"
context.arc(0,0,2,0,Math.PI * 2);
context.closePath();
context.fill()
}
function drawAll(){
context.clearRect(0,0,width,height)
var date = new Date();
var hour = date.getHours();
var minu = date.getMinutes();
var seco = date.getSeconds();
fun();
drawHour(hour,minu);
drawMinu(minu);
drawSec(seco)
drawD()
context.restore()
}
drawAll()
setInterval(drawAll,1000)
</script>
</body>
</html>
canvas写的时钟
猜你喜欢
转载自blog.csdn.net/weixin_42940821/article/details/82182331
今日推荐
周排行