正直に言うと、今日は醜い時計を送ります
キャンバスをデバッグするツールはありますか？私は常にブラウザで効果を更新する必要があります。私はとても疲れています〜
（┬＿┬）
コード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document </title> <style> body {background：＃eee; } canvas {background：#fff; } </style> </head> <body> <canvas>あなたのブラウザはそれをサポートしていません、アップグレードしてください... </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）; /*circle frame* / cas.linewidth = 3; cas.shadowcolor = "＃888"; cas.shadowoffsetx = 1; cas.shadowoddowblur = 1; cas.shadowoddowblur cas.arc（数学*） cas.shadowsetx = 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） s = date.getseconds（）;*5+5*m/60,100）; cas.fillstyle = "＃858384"; /*時間の手の関数*/function針（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）*角度）、400+len*math.sin（（t*6-90）*angle））; cas.stroke（）; } </script> </body> </html>この時計の焦点は、それを描く方法ではありません。三角関数では、三角関数の使用は角度に密接に関連しています。 math.piはπ、math.sin（）、math.cos（）です。
角度をラジアンに変換します。時計を描く前に、まず時計の条件を判断する必要があります。円を60部分に分割し、各部分はスケールを表し、円の座標は数学の正の方向に基づいています。したがって、
開始座標を調整し、クロックの開始位置と同じに90度減らす必要があります。
キャンバスを学ぶ前に、忘れた数学的な機能をレビューする必要があります。それは複雑なことではありません。キャンバスの学習は、座標を常に確認し、それを線に接続することです
最後に、それは図に引き込まれます。これは、数学で表面に向かう点とラインのポイントと同じです。
上記のコードは、行を使用して描画するのは難しくありません。つまり、線描画機能を使用して色を繰り返し使用します。ああ〜それを使用するオーディオタグもあり、時計に届く音が刻々と刻まれています〜
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。