前端canvas颗粒时钟

公司常用的前端开发软件
前端开发啥软件好用
手机开发前端的软件

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>canvas时钟</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            window.onload = function() {
                var WINDOW_WIDTH = document.body.scrollWidth
                var WINDOW_HEIGHT = document.body.scrollHeight – 10
                var RADIUS = 7 //球半径
                var NUMBER_GAP = 10 //数字之间的间隙
                var u = 0.65 //碰撞能量损耗系数
                var context //Canvas绘制上下文
                var balls = [] //存储彩色的小球
                const colors = [
                    ‘#33B5E5’,
                    ‘#0099CC’,
                    ‘#AA66CC’,
                    ‘#9933CC’,
                    ‘#99CC00’,
                    ‘#669900’,
                    ‘#FFBB33’,
                    ‘#FF8800’,
                    ‘#FF4444’,
                    ‘#CC0000’,
                ] //彩色小球的颜色
                var currentNums = [] //屏幕显示的8个字符
                var digit = [
                    [
                        [0, 0, 1, 1, 1, 0, 0],
                        [0, 1, 1, 0, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 0, 1, 1, 0],
                        [0, 0, 1, 1, 1, 0, 0],
                    ], //0
                    [
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 1, 1, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [1, 1, 1, 1, 1, 1, 1],
                    ], //1
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 1, 1, 1, 1, 1],
                    ], //2
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 1, 0, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //3
                    [
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 1, 0],
                        [0, 0, 1, 1, 1, 1, 0],
                        [0, 1, 1, 0, 1, 1, 0],
                        [1, 1, 0, 0, 1, 1, 0],
                        [1, 1, 1, 1, 1, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 1, 1],
                    ], //4
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 1, 1, 1, 1, 0],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //5
                    [
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //6
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                    ], //7
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //8
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                    ], //9
                    [
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                        [0, 1, 1, 0],
                        [0, 1, 1, 0],
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                        [0, 1, 1, 0],
                        [0, 1, 1, 0],
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                    ], //:
                ]
                function drawDatetime(cxt) {
                    var nums = []
                    var date = new Date()
                    var hours = date.getHours()
                    var num1 = Math.floor(hours / 10)
                    var num2 = hours % 10
                    context.fillStyle = colors[date.getSeconds() % 10]
                    var offsetX = WINDOW_WIDTH / 4,
                        offsetY = 30
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    nums.push({
                        num: 10,
                    }) //冒号
                    var minutes = date.getMinutes()
                    var num1 = Math.floor(minutes / 10)
                    var num2 = minutes % 10
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    nums.push({
                        num: 10,
                    }) //冒号
                    var seconds = date.getSeconds()
                    var num1 = Math.floor(seconds / 10)
                    var num2 = seconds % 10
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    for (var x = 0; x < nums.length; x++) {
                        nums[x].offsetX = offsetX
                        offsetX = drawSingleNumber(
                            offsetX,
                            offsetY,
                            nums[x].num,
                            cxt,
                        )
                        //两个数字连一块,应该间隔一些距离
                        if (x < nums.length – 1) {
                            if (nums[x].num != 10 && nums[x + 1].num != 10) {
                                offsetX += NUMBER_GAP
                            }
                        }
                    }
                    //说明这是初始化
                    if (currentNums.length == 0) {
                        currentNums = nums
                    } else {
                        //进行比较
                        for (
                            var index = 0;
                            index < currentNums.length;
                            index++
                        ) {
                            if (currentNums[index].num != nums[index].num) {
                                //不一样时,添加彩色小球
                                addBalls(nums[index])
                                currentNums[index].num = nums[index].num
                            }
                        }
                    }
                    renderBalls(cxt)
                    updateBalls()
                    return date
                }
                function addBalls(item) {
                    var num = item.num
                    var numMatrix = digit[num]
                    for (var y = 0; y < numMatrix.length; y++) {
                        for (var x = 0; x < numMatrix[y].length; x++) {
                            if (numMatrix[y][x] == 1) {
                                var ball = {
                                    offsetX:
                                        item.offsetX + RADIUS + RADIUS * 2 * x,
                                    offsetY: 30 + RADIUS + RADIUS * 2 * y,
                                    color:
                                        colors[
                                            Math.floor(
                                                Math.random() * colors.length,
                                            )
                                        ],
                                    g: 1.5 + Math.random(),
                                    vx:
                                        Math.pow(
                                            -1,
                                            Math.ceil(Math.random() * 10),
                                        ) *
                                            4 +
                                        Math.random(),
                                    vy: -5,
                                }
                                balls.push(ball)
                            }
                        }
                    }
                }
                function renderBalls(cxt) {
                    for (var index = 0; index < balls.length; index++) {
                        cxt.beginPath()
                        cxt.fillStyle = balls[index].color
                        cxt.arc(
                            balls[index].offsetX,
                            balls[index].offsetY,
                            RADIUS,
                            0,
                            2 * Math.PI,
                        )
                        cxt.fill()
                    }
                }
                function updateBalls() {
                    var i = 0
                    for (var index = 0; index < balls.length; index++) {
                        var ball = balls[index]
                        ball.offsetX += ball.vx
                        ball.offsetY += ball.vy
                        ball.vy += ball.g
                        if (ball.offsetY > WINDOW_HEIGHT – RADIUS) {
                            ball.offsetY = WINDOW_HEIGHT – RADIUS
                            ball.vy = -ball.vy * u
                        }
                        if (
                            ball.offsetX > RADIUS &&
                            ball.offsetX < WINDOW_WIDTH – RADIUS
                        ) {
                            balls[i] = balls[index]
                            i++
                        }
                    }
                    //去除出边界的球
                    for (; i < balls.length; i++) {
                        balls.pop()
                    }
                }
                function drawSingleNumber(offsetX, offsetY, num, cxt) {
                    var numMatrix = digit[num]
                    for (var y = 0; y < numMatrix.length; y++) {
                        for (var x = 0; x < numMatrix[y].length; x++) {
                            if (numMatrix[y][x] == 1) {
                                cxt.beginPath()
                                cxt.arc(
                                    offsetX + RADIUS + RADIUS * 2 * x,
                                    offsetY + RADIUS + RADIUS * 2 * y,
                                    RADIUS,
                                    0,
                                    2 * Math.PI,
                                )
                                cxt.fill()
                            }
                        }
                    }
                    cxt.beginPath()
                    offsetX += numMatrix[0].length * RADIUS * 2
                    return offsetX
                }
                var canvas = document.getElementById(‘canvas’)
                canvas.width = WINDOW_WIDTH
                canvas.height = WINDOW_HEIGHT
                context = canvas.getContext(‘2d’)
                //记录当前绘制的时刻
                var currentDate = new Date()
                setInterval(function() {
                    //清空整个Canvas,重新绘制内容
                    context.clearRect(
                        0,
                        0,
                        context.canvas.width,
                        context.canvas.height,
                    )
                    drawDatetime(context)
                }, 50)
            }
        </script>
    </head>
    <body>
        <canvas id=”canvas”></canvas>
    </body>
</html>

改一下变成了弹性球

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>canvas时钟</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            window.onload = function() {
                var WINDOW_WIDTH = document.body.scrollWidth
                var WINDOW_HEIGHT = document.body.scrollHeight – 10
                var RADIUS = 7 //球半径
                var NUMBER_GAP = 10 //数字之间的间隙
                var u = 0.95 //碰撞能量损耗系数
                var context //Canvas绘制上下文
                var balls = [] //存储彩色的小球
                const colors = [
                    ‘#33B5E5’,
                    ‘#0099CC’,
                    ‘#AA66CC’,
                    ‘#9933CC’,
                    ‘#99CC00’,
                    ‘#669900’,
                    ‘#FFBB33’,
                    ‘#FF8800’,
                    ‘#FF4444’,
                    ‘#CC0000’,
                ] //彩色小球的颜色
                var currentNums = [] //屏幕显示的8个字符
                var digit = [
                    [
                        [0, 0, 1, 1, 1, 0, 0],
                        [0, 1, 1, 0, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 0, 1, 1, 0],
                        [0, 0, 1, 1, 1, 0, 0],
                    ], //0
                    [
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 1, 1, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [1, 1, 1, 1, 1, 1, 1],
                    ], //1
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 1, 1, 1, 1, 1],
                    ], //2
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 1, 0, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //3
                    [
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 1, 0],
                        [0, 0, 1, 1, 1, 1, 0],
                        [0, 1, 1, 0, 1, 1, 0],
                        [1, 1, 0, 0, 1, 1, 0],
                        [1, 1, 1, 1, 1, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 1, 1],
                    ], //4
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 1, 1, 1, 1, 0],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //5
                    [
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                        [1, 1, 0, 0, 0, 0, 0],
                        [1, 1, 0, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //6
                    [
                        [1, 1, 1, 1, 1, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                        [0, 0, 1, 1, 0, 0, 0],
                    ], //7
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 1, 1, 0],
                    ], //8
                    [
                        [0, 1, 1, 1, 1, 1, 0],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [1, 1, 0, 0, 0, 1, 1],
                        [0, 1, 1, 1, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 0, 1, 1],
                        [0, 0, 0, 0, 1, 1, 0],
                        [0, 0, 0, 1, 1, 0, 0],
                        [0, 1, 1, 0, 0, 0, 0],
                    ], //9
                    [
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                        [0, 1, 1, 0],
                        [0, 1, 1, 0],
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                        [0, 1, 1, 0],
                        [0, 1, 1, 0],
                        [0, 0, 0, 0],
                        [0, 0, 0, 0],
                    ], //:
                ]
                function drawDatetime(cxt) {
                    var nums = []
                    var date = new Date()
                    var hours = date.getHours()
                    var num1 = Math.floor(hours / 10)
                    var num2 = hours % 10
                    context.fillStyle = colors[date.getSeconds() % 10]
                    var offsetX = 100,
                        offsetY = -200
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    nums.push({
                        num: 10,
                    }) //冒号
                    var minutes = date.getMinutes()
                    var num1 = Math.floor(minutes / 10)
                    var num2 = minutes % 10
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    nums.push({
                        num: 10,
                    }) //冒号
                    var seconds = date.getSeconds()
                    var num1 = Math.floor(seconds / 10)
                    var num2 = seconds % 10
                    nums.push({
                        num: num1,
                    })
                    nums.push({
                        num: num2,
                    })
                    for (var x = 0; x < nums.length; x++) {
                        nums[x].offsetX = offsetX
                        offsetX = drawSingleNumber(
                            offsetX,
                            offsetY,
                            nums[x].num,
                            cxt,
                        )
                        //两个数字连一块,应该间隔一些距离
                        if (x < nums.length – 1) {
                            if (nums[x].num != 10 && nums[x + 1].num != 10) {
                                offsetX += NUMBER_GAP
                            }
                        }
                    }
                    //说明这是初始化
                    if (currentNums.length == 0) {
                        currentNums = nums
                    } else {
                        //进行比较
                        for (
                            var index = 0;
                            index < currentNums.length;
                            index++
                        ) {
                            if (currentNums[index].num != nums[index].num) {
                                //不一样时,添加彩色小球
                                addBalls(nums[index])
                                currentNums[index].num = nums[index].num
                            }
                        }
                    }
                    renderBalls(cxt)
                    updateBalls()
                    return date
                }
                function addBalls(item) {
                    var num = item.num
                    var numMatrix = digit[num]
                    for (var y = 0; y < numMatrix.length; y++) {
                        for (var x = 0; x < numMatrix[y].length; x++) {
                            if (numMatrix[y][x] == 1) {
                                var ball = {
                                    offsetX:
                                        item.offsetX + RADIUS + RADIUS * 2 * x,
                                    offsetY: -200 + RADIUS + RADIUS * 2 * y,
                                    color:
                                        colors[
                                            Math.floor(
                                                Math.random() * colors.length,
                                            )
                                        ],
                                    g: 1.5 + Math.random(),
                                    vx:
                                        Math.pow(
                                            -1,
                                            Math.ceil(Math.random() * 10),
                                        ) *
                                            4 +
                                        Math.random(),
                                    vy: -5,
                                }
                                balls.push(ball)
                            }
                        }
                    }
                }
                function renderBalls(cxt) {
                    for (var index = 0; index < balls.length; index++) {
                        cxt.beginPath()
                        cxt.fillStyle = balls[index].color
                        cxt.arc(
                            balls[index].offsetX,
                            balls[index].offsetY,
                            RADIUS,
                            0,
                            2 * Math.PI,
                        )
                        cxt.fill()
                    }
                }
                function updateBalls() {
                    var i = 0
                    for (var index = 0; index < balls.length; index++) {
                        var ball = balls[index]
                        ball.offsetX += ball.vx
                        ball.offsetY += ball.vy
                        ball.vy += ball.g
                        if (ball.offsetY > WINDOW_HEIGHT – RADIUS) {
                            ball.offsetY = WINDOW_HEIGHT – RADIUS
                            ball.vy = -ball.vy * u
                        }
                        if (
                            ball.offsetX > RADIUS &&
                            ball.offsetX < WINDOW_WIDTH – RADIUS
                        ) {
                            balls[i] = balls[index]
                            i++
                        }
                    }
                    //去除出边界的球
                    for (; i < balls.length; i++) {
                        balls.pop()
                    }
                }
                function drawSingleNumber(offsetX, offsetY, num, cxt) {
                    var numMatrix = digit[num]
                    for (var y = 0; y < numMatrix.length; y++) {
                        for (var x = 0; x < numMatrix[y].length; x++) {
                            if (numMatrix[y][x] == 1) {
                                cxt.beginPath()
                                cxt.arc(
                                    offsetX + RADIUS + RADIUS * 2 * x,
                                    offsetY + RADIUS + RADIUS * 2 * y,
                                    RADIUS,
                                    0,
                                    2 * Math.PI,
                                )
                                cxt.fill()
                            }
                        }
                    }
                    cxt.beginPath()
                    offsetX += numMatrix[0].length * RADIUS * 2
                    return offsetX
                }
                var canvas = document.getElementById(‘canvas’)
                canvas.width = WINDOW_WIDTH
                canvas.height = WINDOW_HEIGHT
                context = canvas.getContext(‘2d’)
                //记录当前绘制的时刻
                var currentDate = new Date()
                setInterval(function() {
                    //清空整个Canvas,重新绘制内容
                    context.clearRect(
                        0,
                        0,
                        context.canvas.width,
                        context.canvas.height,
                    )
                    drawDatetime(context)
                }, 50)
            }
        </script>
    </head>
    <body>
        <canvas id=”canvas”></canvas>
    </body>
</html>
软件开发前端知识视频
web前端开发的软件
软件开发的前端和后端
» 本文来自:前端开发者 » 《前端canvas颗粒时钟》
» 本文链接地址:https://www.rokub.com/6887.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!