今天就跟大家聊聊有关如何通过canvas+js实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。之前学习了下HTML5中的canvas元素，为了练练手就实现了一个简易的时钟
今天就跟大家聊聊有关如何通过canvas+js实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
之前学习了下HTML5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：
实现效果：
html代码：
<!DOCTYPE html> <html> <head> <meta Http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <style type="text/CSS"> *{ margin: 0; padding: 0; } .canvas{ margin-left: 20px; margin-top: 20px; border: solid 1px; } </style> </head> <body onload= "main()"> <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas> <script type= "text/javascript" src = "Clock.js"></script> </body> </html>JS代码:
var Canvas = {}; Canvas.cxt = document.getElementById('canvasId').getContext('2d'); Canvas.Point = function(x, y){ this.x = x; this.y = y; }; Canvas.clearCxt = function(){ var me = this; var canvas = me.cxt.canvas; me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight); }; Canvas.Clock = function(){ var me = Canvas, c = me.cxt, radius = 150, scale = 20, minangle = (1/30)*Math.PI, hourangle = (1/6)*Math.PI, hourHandLength = radius/2, minHandLength = radius/3*2, secHandLength = radius/10*9, center = new me.Point(c.canvas.width/2, c.canvas.height/2); function drawCenter(){ c.save(); c.translate(center.x, center.y); c.fillStyle = 'black'; c.beginPath(); c.arc(0, 0, radius/20, 0, 2*Math.PI); c.closePath(); c.fill(); c.stroke(); c.restore(); }; function drawBackGround(){ c.save(); c.translate(center.x, center.y); function drawScale(){ c.moveTo(radius - scale, 0); c.lineTo(radius, 0); }; c.beginPath(); c.arc(0, 0, radius, 0, 2*Math.PI, true); c.closePath(); for (var i = 1; i <= 12; i++) { drawScale(); c.rotate(hourangle); }; c.font = " bold 30px impack" c.fillText("3", 110, 10); c.fillText("6", -7, 120); c.fillText("9", -120, 10); c.fillText("12", -16, -100); c.stroke(); c.restore(); }; this.drawHourHand = function(h){ h = h === 0? 24: h; c.save(); c.translate(center.x, center.y); c.rotate(3/2*Math.PI); c.rotate(h*hourangle); c.beginPath(); c.moveTo(0, 0); c.lineTo(hourHandLength, 0); c.stroke(); c.restore(); }; this.drawMinHand = function(m){ m = m === 0? 60: m; c.save(); c.translate(center.x, center.y); c.rotate(3/2*Math.PI); c.rotate(m*minangle); c.beginPath(); c.moveTo(0, 0); c.lineTo(minHandLength, 0); c.stroke(); c.restore(); }; this.drawSecHand = function(s){ s = s === 0? 60: s; c.save(); c.translate(center.x, center.y); c.rotate(3/2*Math.PI); c.rotate(s*minangle); c.beginPath(); c.moveTo(0, 0); c.lineTo(secHandLength, 0); c.stroke(); c.restore(); }; this.drawClock = function(){ var me = this; function draw(){ var date = new Date(); Canvas.clearCxt(); drawBackGround(); drawCenter(); me.drawHourHand(date.getHours() + date.getMinutes()/60); me.drawMinHand(date.getMinutes() + date.getSeconds()/60); me.drawSecHand(date.getSeconds()); } draw(); setInterval(draw, 1000); }; }; var main = function(){ var clock = new Canvas.Clock(); clock.drawClock(); };代码中涉及到了一些简单的canvas元素api 大家Google一下即可，
看完上述内容，你们对如何通过Canvas+JS实现简易的时钟有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。
--结束END--
本文标题: 如何通过Canvas+JS实现简易的时钟
本文链接: https://www.lsjlt.com/news/287648.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0