canvas画布做出炫酷时钟

canvas画布做出炫酷时钟

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

所以我们可以用画布做出丰富的动画效果哟
今天来给大家分享一个时钟动画：

首先第一步写出基本样式

 <canvas id="canvas" width="800" height="800" style="background-color: aquamarine;"></canvas>

并在javascript中获取画布：

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d")

封装函数

1.获取本地时间。
2.转换12小时，方便后面的使用

 function moveClock() {
   
 var now = new Date()
            var second = now.getSeconds()
            var minute = now.getMinutes()
            var hour0 = now.getHours()
            //转换12小时
            var hour = hour0 + minute / 60;
            hour = hour > 12 ? hour - 12 : hour;

            var time = now.toLocaleString()
 }

3.绘制渐变表框

//渐变表边框
  var gra = context.createLinearGradient(0, 0, 500, 500);
            gra.addColorStop(0.3, "red")
            gra.addColorStop(0.6,