3 回答
已采纳
咕咕问
TA贡献78条经验 获得超12个赞
css 画个圆，或者直接弄张png图片弄个圆出来。 然后png图片弄个时分秒的指针 transform 设置指针的旋转角度（用js控制css transform的值）
西兰花伟大炮
TA贡献376条经验 获得超318个赞
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>画一个时钟</title>
<style>
#canvas{
margin:200px auto;
border: 1px solid #e9e0b5;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" height="300px" width="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width /2;
/*canvas绘制环境*/
function drawBackGround(ctx){
/*绘制圆框，60点，数字*/
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.arc(0,0,r-5,0,Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();
ctx.closePath();
ctx.font = "18px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
var hoursNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
/*传入的number为数组值，i为数组索引*/
hoursNumber.forEach(function (number,i) {
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30);
/*cos与sin传入的是弧度值，包括rotate也是弧度，但是css中为deg*/
var y = Math.sin(rad) * (r - 30);
ctx.fillText(number,x,y);
});
for(var i= 0;i < 60;i++){
var radDot = 2 * Math.PI / 60 * i;
var x = Math.cos(radDot) * (r - 18);
var y = Math.sin(radDot) * (r - 18);
ctx.beginPath();
/*必须在这里beginpath? 不然出现被灰圈遮住*/
if(i % 5 === 0){
ctx.arc(x,y,2,0,Math.PI *2);
ctx.fillStyle = "#000";
}else
{
ctx.arc(x,y,2,0,Math.PI *2);
ctx.fillStyle = "gray";
}
ctx.fill();
}
}
function drawHour(hour,minnue){
ctx.save();
ctx.beginPath();
var rad = Math.PI * 2 / 12 *hour;
var mrad = Math.PI * 2 / 12 / 60 * minnue;
/*分针会导致时针的运动，需要加上分针引起的弧度，每分钟会导致时针变化的弧度*/
ctx.rotate(rad + mrad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r + 48);
ctx.lineCap = "round";
ctx.lineWidth = 6;
ctx.stroke();
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = Math.PI * 2 / 60 * minute;
ctx.rotate(rad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r + 36);
ctx.lineCap = "round";
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore();
};
function drawSecond(second){
ctx.save();
ctx.beginPath();
var rad = Math.PI * 2 / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r + 40);
ctx.lineTo(-1,-r + 40);
ctx.fillStyle = "#c14543";
ctx.fill();
ctx.restore();
};
function drawDot(){
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(0,0,3,0,Math.PI * 2);
ctx.fill();
/*中间的白点*/
}
function draw(){
ctx.clearRect(0,0,width,height);
/*每秒进行一次重绘*/
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackGround(ctx);
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore()
}
draw();
setInterval(draw,1000);
</script>
</body>
</html>欢迎明天采纳
添加回答
举报
0/150
提交
取消