I'll send an ugly clock today, to be honest
Is there any tool to debug canvas? I always need to refresh the effect in the browser. I'm so tired~
(┬＿┬)
Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #eee; } canvas{ background: #fff; } </style></head><body> <canvas> Your browser does not support it, please upgrade...</canvas> <audio id="audio" src="1.wav"></audio> <script> var oAudio=document.getElementById("audio"); var oCas=document.getElementsByTagName("canvas")[0]; var cas=oCas.getContext("2d"); oAudio.ontimeupdate=function(){ if(oAudio.currentTime>0.1){ this.pause(); } } /*Gradial color*/ var color=cas.createRadialGradient(400,400,10,400,400,200); color.addColorStop(0,"#f1f4f5"); color.addColorStop(1,"#c5c6c7"); setInterval(function(){ oAudio.currentTime=0; oAudio.play(); cas.clearRect(0,0,800,800); /*Draw the circle frame*/ cas.lineWidth=3; cas.shadowColor="#888"; cas.shadowOffsetX=1; cas.shadowOddsetY=1; cas.shadowBlur=5; cas.arc(400,400,200,0,Math.PI*2,false); cas.strokeStyle=color; cas.stroke(); /*Draw the circle*/ cas.fillStyle=color; cas.fill(); /*Draw the moment*/ drawTime(); function drawTime(){ var len=8; var len1=16; cas.strokeStyle="#7f7f7f"; cas.shadowOffsetX=0; cas.shadowOddsetY=0; cas.shadowBlur=0; cas.beginPath(); for(var i=0;i<60;i++){ if(i%5==0){ cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200); cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180)); }else{ cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200); cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180)); } } cas.stroke(); } /*Draw the hour hand*/ var date=new Date(); var h=date.getHours(); var m=date.getMinutes(); var s=date.getSeconds(); /*Hour hand*/ needle(h*5+5*m/60,100,"#579ec5"); /*Minute hand*/ needle(m,130,"#5e717c"); /*Second hand*/ needle(s,150,"#1d1e1e"); /*Central point of the circle*/ cas.fillStyle="#858384"; cas.beginPath(); cas.arc(400,400,5,0,2*Math.PI,true); cas.shadowOffsetX=1; cas.shadowOddsetY=1; cas.shadowBlur=5; cas.fill(); },1000); /* function of the hour hand*/ function needle(t,len,color){ var angle=Math.PI/180; cas.beginPath(); cas.strokeStyle=color; cas.moveTo(400,400); cas.lineTo(400+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle)); cas.stroke(); } </script></body></html>The focus of this clock is not on how to draw it. In trigonometric functions, the use of trigonometric functions is closely related to angles. Math.PI is π, Math.sin(), Math.cos(), they all accept radians, so they must
Convert the angle into radians. Before drawing the clock, you must first judge the conditions of the clock. Divide the circle into 60 parts, each part represents a scale, and the coordinates of the circle are based on the positive direction in mathematics. Therefore,
You need to adjust the starting coordinates and reduce them by 90 degrees to the same as the starting position of the clock.
Before learning canvas, you must review the mathematical functions you have forgotten before. It is not something complicated to do. The learning of canvas is to constantly confirm the coordinates and then connect them into lines
Finally, it is drawn into a diagram, which is the same as the point to line and line to surface in mathematics.
The above code is not difficult to use lines to draw, that is, to use the line drawing function and fill color repeatedly. Oh ~ There is also an audio tag to use it, and the sound that reaches the clock is ticking ticking ticking ~
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.