炫酷动态时钟——canvas_canvas绘制一个渐变时钟-优快云博客

这篇博客分享了如何使用HTML5的canvas元素制作一个动态时钟。作者首先介绍了canvas的基本知识点，包括获取context对象和绘制圆形的方法。接着，详细解释了动态时钟的工作原理，即根据当前时间转换角度并更新画布。最后提供了代码示例，演示了如何用原生JavaScript实现这个效果，并表达了对指导老师的感谢。

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

今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。

效果图

在这里插入图片描述

HTML5的canvas的知识点

看源代码前先看一下canvas的基本知识点：
首先，找到 canvas 元素:

var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：

var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

其中**arc()**方法的使用如下：
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
在这里插入图片描述
中心：arc(100,75,50,0Math.PI,1.5Math.PI)
起始角：arc(100,75,50,0,1.5Math.PI)
结束角：arc(100,75,50,0Math.PI,1.5*Math.PI)

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
圆渐变例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white")