如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）

1. h5元素“Canvas”的简介

Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。

通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。此外，还可以在画布上绘制文本、图片等。

2.如何使用“Canvas”？

Canvas是HTML5中的一个元素，所以它就是HTML中的一个标签，这个标签就等于绘制图形的背景板，图形都会显示在上面。

<canvas id="myCanvas" width="500" height="500"></canvas>

3.如何在“Canvas”中绘制图形？

Canvas中绘制图形其实都在JavaScript中编写代码呈现效果，要使用Canvas绘制必须要给Canvas标签增加一个方法getContext('2d')，否则图形不会显示。

const c = document.querySelector('#myCanvas')
const ctx = c.getContext('2d')

增加方法后，图形千变万化的，如何去绘制想要的图形呢？

Canvas提供了一系列的方法，可以用来绘制各种形状、路径、文本和图像等。下面列举了一些常用的绘图方法：

1. fillRect(x, y, width, height)：绘制填充矩形。（x/y表示矩形右上角的初始的位置，width/height表示矩形大小）
2. strokeRect(x, y, width, height)：绘制矩形边框。
3. clearRect(x, y, width, height)：清除指定区域内的像素。（删除Canvas中区域）
4. fillText(text, x, y)：绘制填充文本。（text为想要设置的文本）
5. strokeText(text, x, y)：绘制文本边框。
6. beginPath()：开始创建路径。
7. moveTo(x, y)：将路径移动到指定的位置。
8. lineTo(x, y)：添加一条直线到指定的位置。
9. arc(x, y, radius（半径）, startAngle（开始角度）, endAngle（结束角度）, anticlockwise)：绘制圆弧或者圆。
10. quadraticCurveTo(cp1x, cp1y, x, y)：绘制二次贝塞尔曲线。
11. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：绘制三次贝塞尔曲线。
12. closePath()：关闭当前的路径。
13. fill()：填充当前路径。
14. stroke()：描边当前路径。
15. clip()：剪切当前路径。
16. drawImage(image, x, y)：绘制图像。
17. createLinearGradient(x0, y0, x1, y1)：创建线性渐变。
18. createRadialGradient(x0, y0, r0, x1, y1, r1)：创建径向渐变。
19. createPattern(image, repetition)：创建图像样式的填充模式。
20. rect(x, y, width, height)：创建矩形路径。

4.如何绘制时钟？

绘制时钟，肯定需要画圆（时钟边框），添加文本（时钟点数，时钟下面显示当前时间），绘制路径（时分秒针），固定位置（时钟放置位置），完整代码如下：

<canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        const c = document.querySelector('#myCanvas')
        const ctx = c.getContext('2d')
        // 封装函数，避免污染
        function canvas() {
            // 创建路径
            ctx.beginPath()
            // 绘制圆形
            ctx.arc(250, 200, 150, 0, 2 * Math.PI)
            ctx.strokeStyle = 'red'
            ctx.font = '25px 宋体'
            // 获取当前时间
            const data = new Date()
            // 计算当前时间的时分秒（+data表示时间戳，具体可查询资料）
            s = ((+data / 1000) % 60) * (360 / 60)
            m = (+data / 1000) / 60 % 60 * (360 / 60)
            // 小时+8表示中国时间，具体可参考时间戳原理
            h = (((+data / 1000) / 60 / 60 + 8) % 24 % 12) * (360 / 12)
            // 绘制时分秒针
            ctx.moveTo(250, 200)
            // 三角函数计算旋转末位置（-90表示从12点开始，因为绘制圆开始点为3点开始）
            ctx.lineTo(250 + Math.cos((-90 + s) * Math.PI / 180) * 120, 200 + Math.sin((-90 + s) * Math.PI / 180) * 120)
            ctx.moveTo(250, 200)
            ctx.lineTo(250 + Math.cos((-90 + m) * Math.PI / 180) * 90, 200 + Math.sin((-90 + m) * Math.PI / 180) * 90)
            ctx.moveTo(250, 200)
            ctx.lineTo(250 + Math.cos((-90 + h) * Math.PI / 180) * 60, 200 + Math.sin((-90 + h) * Math.PI / 180) * 60)
            // 绘制文字
            ctx.fillText('3', 385, 200)
            ctx.fillText('6', 245, 345)
            ctx.fillText('9', 105, 200)
            ctx.fillText('12', 240, 70)
            ctx.font = '18px 宋体'
            ctx.fillText('1', 315, 90)
            ctx.fillText('2', 360, 135)
            ctx.fillText('4', 360, 280)
            ctx.fillText('5', 315, 325)
            ctx.fillText('7', 170, 325)
            ctx.fillText('8', 120, 275)
            ctx.fillText('10', 120, 140)
            ctx.fillText('11', 170, 90)
            ctx.fillText(data, 35, 380)
            // 描边路径
            ctx.stroke()
        }
        canvas()
        // 设置定时器，使每一秒页面变动一次（时钟转动）
        setInterval(() => {
            // 删除整个页面图形
            ctx.clearRect(0, 0, c.width, c.height)
            // 再次渲染
            canvas()
        }, 1000)
    </script>

整体效果：

网页时钟