솔직히 말하면 오늘 추악한 시계를 보내겠습니다
캔버스를 디버그하는 도구가 있습니까? 항상 브라우저의 효과를 새로 고침해야합니다. 너무 피곤해 ~
(┬＿┬)
암호:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <style> body {background : #eee; } canvas {배경 : #fff; } </style> </head> <body> <canvas> 브라우저를 지원하지 않습니다. 업그레이드하십시오 ... </canvas> <audio id = "Audio"src = "1.wav"> </audio> <cript> var oaudio = document.getElementById ( "Audio"); var ocas = document.getElementsByTagName ( "Canvas") [0]; var cas = ocas.getContext ( "2d"); OAudio.ontimeupdate = function () {if (ooaudio.currenttime> 0.1) {this.pause (); }} /*rowgial 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); /**원 프레임을 그리거나 cas.shadowcolor = "#888"; cas.shadowoffsetx = 1; shadowoddsty = 1; shadowblur = 5; CASC (400,400,200,0). cas.shadowoddesty = 0; cas.moveto (400+math.cos (i*6*math.pi/180)*200,400+math.sin (i*6*math.pi/180)*200); } else {cas.moveto (400+math.cos (i*6*math.pi/180)*200,400+math.sin (i*6*math.pi/180)*200); CAS.LINETO (200-LEN)*Math.Sin (I*6*Math.sin) (}}}}) s = getseconds ()*/바늘 (h*5+5*m/60,100,/*minute hand*); CAS.ARC (400,400,5,0); /* 시간의 기능*/기능 바늘 (t, len, color) {var angle = math.pi/180; cas.beginpath (); cas.strokestyle = 색상; Cas.Moveto (400,400); cas.lineto (400+len*math.cos ((t*6-90)*angle), 400+len*math.sin ((t*6-90)*각도); cas.stroke (); } </script> </body> </html>이 시계의 초점은 그것을 그리는 방법에 대한 것이 아닙니다. 삼각 함수에서 삼각 함수의 사용은 각도와 밀접한 관련이 있습니다. math.pi는 π, math.sin (), math.cos (), 그들은 모두 라디안을 받아 들여야합니다.
각도를 라디안으로 변환하십시오. 시계를 그리기 전에 먼저 시계의 조건을 판단해야합니다. 원을 60 부분으로 나누고 각 부분은 척도를 나타내며 원의 좌표는 수학의 긍정적 인 방향을 기반으로합니다. 그러므로,
시동 좌표를 조정하고 시계의 시작 위치와 동일하게 90도 줄어 듭니다.
캔버스를 배우기 전에 전에 잊어 버린 수학적 기능을 검토해야합니다. 복잡한 일이 아닙니다. 캔버스의 학습은 좌표를 지속적으로 확인한 다음 라인에 연결하는 것입니다.
마지막으로, 다이어그램으로 이어지는데, 이는 수학에서 표면으로 선과 선을 표현하는 지점과 동일합니다.
위의 코드는 라인을 사용하기가 어렵지 않습니다. 즉, 라인 드로잉 기능을 사용하고 색상을 반복적으로 채우는 것입니다. 오 ~ 그것을 사용할 오디오 태그도 있으며, 시계에 도달하는 소리가 똑딱 거리며 똑딱 거리는 소리 ~
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.