搜索到
2
篇与
canvas
的结果
-
![canvas绘制时钟]()
canvas绘制时钟 不知大家是否看见有的网站会有一个时钟，今天给大家分享一个自己用canvas绘制的时钟,只要系统的时间正确，该时钟的时间就不会错。废话不多说了，下面就是时钟的整个html代码，只需要将代码复制之后保存为html文件就可以运行了，至于怎么加在自己的网站上就需要你们自己琢磨了。 运行结果如下图所示: [code lang="js"] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="时钟"> <meta name="description" content=""> <title>clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body bgcolor="black"> <canvas id="canvas" width="800" height="600">您的浏览器不支持canvas</canvas> <script type="text/javascript"> (function(){ /** *站点：执念博客 *作者：执念 *网址：http://zhinianboke.com */ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = window.innerWidth/2; var y = window.innerHeight/2; var r = 80; var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); drawClock(); move(hours,minutes,seconds); function drawClock(){ //画时钟 ctx.strokeStyle = "gray"; ctx.lineWidth = "3"; ctx.beginPath(); var sr = 5; ctx.arc(x,y,r,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(x,y,2,0,2*Math.PI); ctx.fill(); ctx.font = "13px Arial"; ctx.fillStyle = "gray"; var time = -1; for(var i=0;i<60;i++){ var q = i*2*Math.PI/60; var x1 = 0;//刻度终点 var y1 = 0; var x2 = 0;//刻度起点 var y2 = 0; var x3 = 0;//刻度值位置 var y3 = 0; sr = 5; if(i%5 == 0){ sr = 10; time++; } if(i%15 == 0){ sr = 15; } if(q>=0 && q<Math.PI/2){ x1 = x + r*Math.sin(q); y1 = y - r*Math.cos(q); x2 = x + (r-sr)*Math.sin(q); y2 = y - (r-sr)*Math.cos(q); x3 = x + (r-sr-14)*Math.sin(q); y3 = y - (r-sr-13)*Math.cos(q); } if(q>=Math.PI/2 && q<Math.PI){ x1 = x + r*Math.sin(Math.PI-q); y1 = y + r*Math.cos(Math.PI-q); x2 = x + (r-sr)*Math.sin(Math.PI-q); y2 = y + (r-sr)*Math.cos(Math.PI-q); x3 = x + (r-sr-12)*Math.sin(Math.PI-q); y3 = y + (r-sr-5)*Math.cos(Math.PI-q); } if(q>=Math.PI && q<3*Math.PI/2){ x1 = x - r*Math.cos(3*Math.PI/2-q); y1 = y + r*Math.sin(3*Math.PI/2-q); x2 = x - (r-sr)*Math.cos(3*Math.PI/2-q); y2 = y + (r-sr)*Math.sin(3*Math.PI/2-q); x3 = x - (r-sr-6)*Math.cos(3*Math.PI/2-q); y3 = y + (r-sr-5)*Math.sin(3*Math.PI/2-q); } if(q>=3*Math.PI/2 && q<2*Math.PI){ x1 = x - r*Math.sin(2*Math.PI-q); y1 = y - r*Math.cos(2*Math.PI-q); x2 = x - (r-sr)*Math.sin(2*Math.PI-q); y2 = y - (r-sr)*Math.cos(2*Math.PI-q); x3 = x - (r-sr-0)*Math.sin(2*Math.PI-q); y3 = y - (r-sr-15)*Math.cos(2*Math.PI-q); } ctx.lineWidth = "1"; ctx.moveTo(x2,y2); ctx.lineTo(x1,y1); ctx.stroke(); if(i%5 == 0){ if(time == 0){ ctx.fillText("12",x3-8,y3); }else if(time == 3){ ctx.fillText(time,x3+3,y3+5); }else if(time == 6){ ctx.fillText(time,x3-3,y3+2); }else if(time == 9){ ctx.fillText(time,x3+3,y3+5); }else{ ctx.fillText(time,x3,y3); } } } } function move(hour,min,sec){ //指针移动 if(hour >= 12){ hour -= 12; } hour+= min/60; var arrSec = calculate(sec,30); var arrMin = calculate(min,40); var arrHour = calculate(hour*5+0.2,50); var time;//定时器 ctx.lineWidth = "1"; ctx.moveTo(x,y); ctx.lineTo(arrSec[0],arrSec[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrMin[0],arrMin[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrHour[0],arrHour[1]); ctx.stroke(); drawClock(); time = setInterval(function(){ var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); hour = hours;min = minutes;sec = seconds; if(hour >= 12){ hour -= 12; } hour+= min/60; var arrSec = calculate(sec,30); var arrMin = calculate(min,40); var arrHour = calculate(hour*5+0.2,50); ctx.clearRect(0,0,800,600); ctx.moveTo(x,y); ctx.lineTo(arrSec[0],arrSec[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrMin[0],arrMin[1]); ctx.stroke(); ctx.moveTo(x,y); ctx.lineTo(arrHour[0],arrHour[1]); ctx.stroke(); drawClock(); drawClock(); },1000); } function calculate(i,sr){ //计算指针的位置 var q = i*2*Math.PI/60; var m = new Array(); if(q>=0 && q<Math.PI/2){ m[0] =x + (r-sr)*Math.sin(q); m[1] = y - (r-sr)*Math.cos(q); } if(q>=Math.PI/2 && q<Math.PI){ m[0] = x + (r-sr)*Math.sin(Math.PI-q); m[1] = y + (r-sr)*Math.cos(Math.PI-q); } if(q>=Math.PI && q<3*Math.PI/2){ m[0] = x - (r-sr)*Math.cos(3*Math.PI/2-q); m[1] = y + (r-sr)*Math.sin(3*Math.PI/2-q); } if(q>=3*Math.PI/2 && q<2*Math.PI){ m[0] = x - (r-sr)*Math.sin(2*Math.PI-q); m[1] = y - (r-sr)*Math.cos(2*Math.PI-q); } return m; } function resize(){ //监听浏览器大小改变 var w = window.innerWidth; x = window.innerWidth/2; y = window.innerHeight/2; if(w >= 750){ r = 80; }else if(w < 750){ r = 60; } console.log(w); var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); drawClock(); move(hours,minutes,seconds); } window.addEventListener("resize", resize); })(); </script> </body> </html> [/code] -
![3D烟花效果]()
