用canvas画时钟(一步步详解附带源代码)

canvas绘图

该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法,如果想绘制一条连接到起点的线条则调用closePath()方法;如果路径已完成,你想用fillStyle填充它,可以调用fill()方法。另外还可以调用stroke()方法对路径描边,使用strokeStyle。

接口 参数 功能
rect() x,y,width,height 从点x,y开始绘制一个矩形,宽和高分别由width和height指定,这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc() x,y,radius,startAngle,endAngle,counterclockwise 六个参数 以x,y为圆心绘制一条弧线,半径为radius,起始和结束角度分别为startAngle和endAngle,最后一个参数表示角度是否按逆时针方向计算,值为false表示顺时针。
lineTo() x,y 从上一点开始绘制一条直线,到x,y为止
moveTo() x,y 将绘图游标移动到x,y,不画线。

用canvas画时钟(一步步详解附带源代码)
按照上图,就能画出圆,半圆,,四分之一圆等等。

开始画图

1.先设置一块画布。

<style>         .cvs {         	border:solid 1px blue;  //加一个边框更容易确定位置             display: block;		//把canvas设置为块             margin: auto;		//canvas居中显示         }     </style>     <canvas class="cvs" width="500px" height="500px"></canvas> 

2.画一个圆,并将圆心坐标重新设为(0,0)

var c = document.getElementsByClassName('cvs')[0]         var cv = c.getContext('2d')         cv.translate(250, 250)          function yuan() {             cv.lineWidth = 10;             cv.beginPath()             cv.arc(0, 0, 245, 0, 2 * Math.PI, false)             cv.closePath()             cv.stroke()         } 

3.在钟面上标上时间和刻度

function num() {             var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];             for (i = 0; i < nums.length; i++) {                 var rad = 2 * Math.PI / 12 * i;                 var x = Math.cos(rad) * 215;                 var y = Math.sin(rad) * 215;                 cv.font = "20px Georgia";                 cv.textBaseline = 'middle';                 cv.textAlign = "center";                 cv.fillText(nums[i], x, y);             }             for (i = 0; i < 60; i++) {                 var rad = 2 * Math.PI / 60 * i;                 var x = Math.cos(rad) * 230;                 var y = Math.sin(rad) * 230;                 cv.beginPath();                 if (i % 5 == 0) {                     cv.fillStyle = '#000'                 } else {                     cv.fillStyle = '#ccc'                 }                 cv.arc(x, y, 2, 0, Math.PI * 2, false)                 cv.closePath();                 cv.fill()              }         } 

4.开始画时针

function dHour(hour, minu) {	//因为时针会随着分针的走动而走动,所以设置两个参数             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 12 * hour;	//时针每小时走的角度             var rad2 = 2 * Math.PI / 12 / 60 * minu;             cv.lineWidth = 8;             cv.lineCap = 'round'             cv.rotate(rad + rad2)	//时针走的角度             cv.moveTo(0, 10)             cv.lineTo(0, -115)             cv.stroke();             cv.restore();         } 

5.画分针

function dMinu(minu) {	             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 60 * minu;             cv.lineWidth = 5;             cv.lineCap = 'round'             cv.rotate(rad)             cv.moveTo(0, 10)             cv.lineTo(0, -160)             cv.stroke();             cv.restore();         } 

6.画秒针,秒针的画法和分针基本上一样

function dSecd(secd) {             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 60 * secd;             cv.lineWidth = 3;             cv.lineCap = 'round'             cv.strokeStyle = "#f00";             cv.rotate(rad)             cv.moveTo(0, 10)             cv.lineTo(0, -200)             cv.stroke();             cv.restore();         } 

7.在圆心画一个圆点,用来装饰

function center() {             cv.beginPath()             cv.arc(0, 0, 5, 0, 2 * Math.PI, false)             cv.fillStyle = "gray"             cv.fill()         } 

8.让指针转动

function time() {             var d = new Date();             var h = d.getHours();             var m = d.getMinutes();             var s = d.getSeconds();             // var cr = Math.floor(Math.random() * 256)             // var cg = Math.floor(Math.random() * 256)             // var cb = Math.floor(Math.random() * 256)             // document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';	//网页背景每秒随机改变,可以不要             cv.clearRect(-250, -250, 500, 500);	//每次都清除一下画布,不然每次指针转动都会留下轨迹             yuan()             num()             dHour(h, m)             dMinu(m)             dSecd(s)             center()//将前面函数全部调用         }         time()         setInterval(time, 1000);设置定时器,每秒调用一次 

完整代码

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>clock</title> </head>  <body>     <style>         .cvs {             display: block;             margin: auto;         }     </style>     <canvas class="cvs" width="500px" height="500px"></canvas>       <script>         var c = document.getElementsByClassName('cvs')[0]         var cv = c.getContext('2d')         cv.translate(250, 250)          function yuan() {             cv.lineWidth = 10;             cv.beginPath()             cv.arc(0, 0, 245, 0, 2 * Math.PI, false)             cv.closePath()             cv.stroke()         }          function num() {             var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];             for (i = 0; i < nums.length; i++) {                 var rad = 2 * Math.PI / 12 * i;                 var x = Math.cos(rad) * 215;                 var y = Math.sin(rad) * 215;                 cv.font = "20px Georgia";                 cv.textBaseline = 'middle';                 cv.textAlign = "center";                 cv.fillText(nums[i], x, y);             }             for (i = 0; i < 60; i++) {                 var rad = 2 * Math.PI / 60 * i;                 var x = Math.cos(rad) * 230;                 var y = Math.sin(rad) * 230;                 cv.beginPath();                 if (i % 5 == 0) {                     cv.fillStyle = '#000'                 } else {                     cv.fillStyle = '#ccc'                 }                 cv.arc(x, y, 2, 0, Math.PI * 2, false)                 cv.closePath();                 cv.fill()              }         }          // 时针         function dHour(hour, minu) {             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 12 * hour;             var rad2 = 2 * Math.PI / 12 / 60 * minu;             cv.lineWidth = 8;             cv.lineCap = 'round'             cv.rotate(rad + rad2)             cv.moveTo(0, 10)             cv.lineTo(0, -115)             cv.stroke();             cv.restore();         }         // 分针         function dMinu(minu) {             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 60 * minu;             cv.lineWidth = 5;             cv.lineCap = 'round'             cv.rotate(rad)             cv.moveTo(0, 10)             cv.lineTo(0, -160)             cv.stroke();             cv.restore();         }         // 秒针         function dSecd(secd) {             cv.save();             cv.beginPath();             var rad = 2 * Math.PI / 60 * secd;             cv.lineWidth = 3;             cv.lineCap = 'round'             cv.strokeStyle = "#f00";             cv.rotate(rad)             cv.moveTo(0, 10)             cv.lineTo(0, -200)             cv.stroke();             cv.restore();         }         // 圆心         function center() {             cv.beginPath()             cv.arc(0, 0, 5, 0, 2 * Math.PI, false)             cv.fillStyle = "gray"             cv.fill()         }          function time() {             var d = new Date();             var h = d.getHours();             var m = d.getMinutes();             var s = d.getSeconds();             // var cr = Math.floor(Math.random() * 256)             // var cg = Math.floor(Math.random() * 256)             // var cb = Math.floor(Math.random() * 256)             // document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';             cv.clearRect(-250, -250, 500, 500);             yuan()             num()             dHour(h, m)             dMinu(m)             dSecd(s)             center()         }         time()         setInterval(time, 1000);     </script> </body>  </html> 

相比太极图,时针难度的确是加大了不少。大家也可以继续在时钟的基础上加上更多的东西,让这个时钟变得更加美观。
希望大家在阅读完之后,有更简单的绘制方法,请在评论区留言,谢谢。

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 用canvas画时钟(一步步详解附带源代码)

提供最优质的资源集合

立即查看 了解详情