JavaScript canvas 绘制圆形时钟

最新推荐文章于 2023-04-17 23:20:47 发布

雪峰之巅

最新推荐文章于 2023-04-17 23:20:47 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 学习笔记

本文链接：https://blog.youkuaiyun.com/u012104947/article/details/51190806

版权

JavaScript 学习笔记专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍如何利用HTML5的canvas API创建一个动态的圆形时钟，详细阐述了2D绘图上下文的方法，包括绘制路径、填充、描边以及剪切区域的应用，以实现时钟指针的精准绘制和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用canvas绘制时钟

2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复

杂的形状和线条。要绘制路径，首先必须调用beginPath()方法，表示要开始

绘制新路径。然后，再通过调用下列方法来实际地绘制路径。

 arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。
 arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius 穿过(x1,y1)。
 bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
 lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
 moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
 quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。
 rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

创建了路径后，接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle 填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<canvas id="drawing" width="200" height="200">
</canvas>
</div>
<script>
function test(){
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
//开始路径
context.beginPath();
//绘制外圆
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//绘制分针
context.moveTo(100, 100);
context.lineTo(100, 15);
//绘制时针
context.moveTo(100, 100);
context.lineTo(35, 100);
//描边路径
context.stroke();
}
}
test();

</script>
</body>
</html>

则会产生如下效果