2025年3月16日 星期日 甲辰(龙)年 月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

使用 HTML5 Canvas 制作时钟

时间:02-14来源:作者:点击数:41

<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。

接下来我们将跟大家分享如何在画布上(Canvas)画一个时钟。

先看下效果图:

使用  HTML5 Canvas 制作时钟

源码

HTML 代码
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta charset="utf-8" />
  • <title>HTML5 时钟</title>
  • <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  • <style>
  • .clocks {
  • height: 500px;
  • margin: 25px auto;
  • position: relative;
  • width: 500px;
  • }
  • </style>
  • </head>
  • <body>
  • <header>
  • <h2>HTML5 时钟</h2>
  • </header>
  • <div class="clocks">
  • <canvas id="canvas" width="500" height="500"></canvas>
  • </div>
  • </body>
  • </html>
Javascript 代码
  • // inner variables
  • var canvas, ctx;
  • var clockRadius = 250;
  • var clockImage;
  • // draw functions :
  • function clear() { // clear canvas function
  • ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  • }
  • function drawScene() { // main drawScene function
  • clear(); // clear canvas
  • // get current time
  • var date = new Date();
  • var hours = date.getHours();
  • var minutes = date.getMinutes();
  • var seconds = date.getSeconds();
  • hours = hours > 12 ? hours - 12 : hours;
  • var hour = hours + minutes / 60;
  • var minute = minutes + seconds / 60;
  • // save current context
  • ctx.save();
  • // draw clock image (as background)
  • ctx.drawImage(clockImage, 0, 0, 500, 500);
  • ctx.translate(canvas.width / 2, canvas.height / 2);
  • ctx.beginPath();
  • // draw numbers
  • ctx.font = '36px Arial';
  • ctx.fillStyle = '#000';
  • ctx.textAlign = 'center';
  • ctx.textBaseline = 'middle';
  • for (var n = 1; n <= 12; n++) {
  • var theta = (n - 3) * (Math.PI * 2) / 12;
  • var x = clockRadius * 0.7 * Math.cos(theta);
  • var y = clockRadius * 0.7 * Math.sin(theta);
  • ctx.fillText(n, x, y);
  • }
  • // draw hour
  • ctx.save();
  • var theta = (hour - 3) * 2 * Math.PI / 12;
  • ctx.rotate(theta);
  • ctx.beginPath();
  • ctx.moveTo(-15, -5);
  • ctx.lineTo(-15, 5);
  • ctx.lineTo(clockRadius * 0.5, 1);
  • ctx.lineTo(clockRadius * 0.5, -1);
  • ctx.fill();
  • ctx.restore();
  • // draw minute
  • ctx.save();
  • var theta = (minute - 15) * 2 * Math.PI / 60;
  • ctx.rotate(theta);
  • ctx.beginPath();
  • ctx.moveTo(-15, -4);
  • ctx.lineTo(-15, 4);
  • ctx.lineTo(clockRadius * 0.8, 1);
  • ctx.lineTo(clockRadius * 0.8, -1);
  • ctx.fill();
  • ctx.restore();
  • // draw second
  • ctx.save();
  • var theta = (seconds - 15) * 2 * Math.PI / 60;
  • ctx.rotate(theta);
  • ctx.beginPath();
  • ctx.moveTo(-15, -3);
  • ctx.lineTo(-15, 3);
  • ctx.lineTo(clockRadius * 0.9, 1);
  • ctx.lineTo(clockRadius * 0.9, -1);
  • ctx.fillStyle = '#0f0';
  • ctx.fill();
  • ctx.restore();
  • ctx.restore();
  • }
  • // initialization
  • $(function(){
  • canvas = document.getElementById('canvas');
  • ctx = canvas.getContext('2d');
  • // var width = canvas.width;
  • // var height = canvas.height;
  • clockImage = new Image();
  • clockImage.src = 'https://www.cdsy.xyz/d/file/computer/programme/html_div_css/2023-02-14/cc75bf9c07ba638d46fdfecd2a0d4d11.png';
  • setInterval(drawScene, 1000); // loop drawScene
  • });
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门