Я пришлю уродливые часы сегодня, если честно
Есть ли какой -нибудь инструмент для отладки холста? Мне всегда нужно освежить эффект в браузере. Я так устал ~
(┬＿┬)
Код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> документ </title> <style> body {anbogine: #eee; } canvas {founale: #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 (); }} /*Степенный цвет* / 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.linewidth = 3; cas.shadowcolor = "#888"; cas.shadowoffsetx = 1; 1; Cas.shadowddsety = 1; Cas.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.sh.s. CAS.ARC (400,400,0,0, математика. Cas.shadowoffsetx = 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 (400+ (200-Len)*Math.Cos (i*6*Math.pi/180), 400+(200-len)* s = date.getseconds (); Cas.BeginPath (); /* Функция часовой руки*/функция иглы (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)*angel), 400+len*math.sin ((t*6-90)*angel)); cas.stroke (); } </script> </body> </html>В центре внимания этого часа не на том, чтобы нарисовать его. В тригонометрических функциях использование тригонометрических функций тесно связано с углами. Math.pi IS π, math.sin (), math.cos (), все они принимают радианы, поэтому они должны
Преобразовать угол в радиан. Прежде чем рисовать часы, вы должны сначала оценить условия часов. Разделите круг на 60 частей, каждая часть представляет шкалу, а координаты круга основаны на положительном направлении в математике. Поэтому,
Вам необходимо отрегулировать начальные координаты и уменьшить их на 90 градусов до того же, что и исходное положение часов.
Перед изучением холста вы должны просмотреть математические функции, которые вы забыли раньше. Это не что -то сложное. Изучение холста состоит в том, чтобы постоянно подтверждать координаты, а затем подключать их к линии
Наконец, он втягивается в диаграмму, которая совпадает с точкой линии и линии на поверхность в математике.
Приведенный выше код не сложно использовать линии для рисования, то есть для использования функции чертежа линии и многократно заполнять цвет. О ~ есть также аудиога для его использования, и звук, достигающий часов, тикает тикает ~
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.