Exemple de code pour dessiner une horloge dans Canvas-Tutoriel H5-php.cn

Exemple de code pour dessiner une horloge dans Canvas

不言

Libérer： 2019-03-12 16:37:38

avant

2875 Les gens l'ont consulté

Le contenu de cet article concerne l'exemple de code permettant de dessiner une horloge avec Canvas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Code complet :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div {
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
 
<body>
    <div>
        <canvas id="clock" height="200px" width="200px">你的浏览器不支持canvas</canvas>
    </div>
 
    <script>
        var dom = document.getElementById('clock');
        var ctx = dom.getContext('2d');
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var r = width / 2;
 
 
        //绘制表盘
        function drawBackground() {
            ctx.save();
            ctx.translate(r, r);
            ctx.beginPath();
            ctx.lineWidth = 10;
 
            ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false);
            ctx.stroke();
 
            var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            ctx.font = '18px Arial';
            ctx.textAlign = 'center';
 
            ctx.textBaseline = 'middle';
 
            //小时数字
            hourNumbers.forEach(function (number, i) {
                var rad = 2 * Math.PI / 12 * i;
                var x = Math.cos(rad) * (r - 30);
                var y = Math.sin(rad) * (r - 30);
                ctx.fillText(number, x, y);
                // console.log(x)
            })
 
            //绘制分刻度
            for (var i = 0; i < 60; i++) {
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * (r - 18);
                var y = Math.sin(rad) * (r - 18);
                ctx.beginPath();
                if (i % 5 == 0) {
                    ctx.fillStyle = &#39;#000&#39;;
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                } else {
                    ctx.fillStyle = &#39;#ccc&#39;;
                    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                }
 
                ctx.fill();
            }
 
        }
 
 
 
        //绘制时针
        function drawHour(hour, minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2 * Math.PI / 12 * hour;
            var mrad = 2 * Math.PI / 12 / 60 * minute;
            ctx.rotate(rad + mrad);
            ctx.lineWidth = 6;
            ctx.lineCap = &#39;round&#39;;
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r / 2);
            ctx.stroke();
            ctx.restore();
        }
 
 
        //绘制分针
        function drawMinute(minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2 * Math.PI / 60 * minute;
            ctx.rotate(rad);
            ctx.lineWidth = 3;
            ctx.lineCap = &#39;round&#39;;
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r + 30);
            ctx.stroke();
            ctx.restore();
        }
 
 
        //绘制秒针
        function drawSecond(second) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = &#39;red&#39;
            var rad = 2 * Math.PI / 60 * second;
            ctx.rotate(rad);
            ctx.moveTo(-2, 20);
            ctx.lineTo(2, 20);
            ctx.lineTo(1, -r + 18);
            ctx.lineTo(-1, -r + 18);
            ctx.fill();
            ctx.restore();
        }
 
        //绘制指针的端点
        function drawDot() {
            ctx.beginPath();
            ctx.fillStyle = &#39;white&#39;;
            ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
            ctx.fill();
        }
 
        //动起来
        function draw() {
            //清除之前所绘制的
            ctx.clearRect(0, 0, width, height);
 
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            drawBackground();
            drawHour(hour, minute);
            drawMinute(minute);
            drawSecond(second)
            drawDot();
            ctx.restore();
        }
        //draw();
 
        setInterval(draw, 1000);
    </script>
</body>
 
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!