时间:2021-07-01 10:21:17 帮助过:27人阅读
废话不多说了,直接给大家贴代码了,具体代码如下所示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas_time</title>
- <style type="text/css">
- p {
- text-align: center;
- margin-top: 250px;
- }
- #clock {
- border: 1px solid #cccccc;
- }
- </style>
- </head>
- <body>
- <p>
- <canvas id="clock" height="600px" width="600px"></canvas>
- </p>
- <script type="text/JavaScript" >
- var dom = document.getElementById('clock');
- var ctx = dom.getContext('2d');
- var width = ctx.canvas.width;
- var height = ctx.canvas.height;
- var r = width / 2;
- var rem = width/200;
- function drawBackground() {
- ctx.save(); //存储当前环境变量;
- ctx.translate(r, r); //重置坐标到r,r
- ctx.beginPath(); // 起始一条路径
- ctx.lineWidth = 10*rem; //设置线宽10;
- ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
- ctx.stroke();
- var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
- ctx.font = 18*rem+"px 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*rem);
- var y = Math.sin(rad) * (r - 30*rem);
- ctx.fillText(number, x, y);
- });
- for (var i = 0; i < 60; i++) {
- var rad = 2 * Math.PI / 60 * i;
- var x = Math.cos(rad) * (r - 18*rem);
- var y = Math.sin(rad) * (r - 18*rem);
- ctx.beginPath();
- if (i % 5 === 0) {
- ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
- ctx.fillStyle = "#000";
- } else {
- ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
- ctx.fillStyle = "#ccc";
- }
- 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*rem;
- ctx.lineCap = "round";
- ctx.moveTo(0, 10*rem);
- 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*rem;
- ctx.lineCap = "round";
- ctx.moveTo(0, 10*rem);
- ctx.lineTo(0, -r + 30*rem);
- ctx.stroke();
- ctx.restore();
- }
- function drawSecond(second) {
- ctx.save();
- ctx.beginPath();
- ctx.fillStyle = 'red';
- var rad = 2 * Math.PI / 60 * second;
- ctx.rotate(rad);
- ctx.moveTo(-2*rem, 20*rem);
- ctx.lineTo(2*rem, 20*rem);
- ctx.lineTo(1, -r + 16*rem);
- ctx.lineTo(-1, -r + 16*rem);
- ctx.fill();
- ctx.restore();
- }
- function drawDot() {
- ctx.beginPath();
- ctx.fillStyle = '#fff';
- ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
- ctx.fill();
- }
- function draw01() {
- 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();
- }
- draw01();
- setInterval(draw01, 1000);
- </script>
- </body>
- </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
H5怎么操作WebSQL数据库
前缀data-属性和dataset的使用方法
H5的拖放功能详解
以上就是H5实现可缩放的时钟动画的详细内容,更多请关注Gxl网其它相关文章!