ПРЕДИСЛОВИЕ: Я закончил чтение Canvas Canvas of JS Book сегодня. Я так счастлив ~ Я снова мой любимый холст ~ uye ~
Я видел, как кто -то предлагал мне нарисовать синего толстого человека, да, почему я забыл любимого голубого толстого, которого я имел в детстве? Чтобы выразить свои извинения перед голубым толстым человеком, я сегодня нарисовал в мире привет, что также является своего рода улучшением ~
Хорошо, пожалуйста, идите внутрь за пассажирами. Пожалуйста, не блокируйте отрывок, спасибо. Давай поедем ~
текст:
Давайте сфотографируем сегодня и посмотрим эффект
Сегодня толстый голубой человек выглядит так, и я чувствую облегчение, увидев, что он все еще такой толстый. Этот мир по -прежнему полон позитивной энергии, и есть все еще люди, которые толще меня, хахахаха
Тогда код
HTML Part
<canvas id = "mycanvas"> go и обновите свой браузер ~ </canvas>
JS Part
window.addEventListener("load", function(){//Get the canvas context var context = document.getElementById("myCanvas").getContext("2d");//Judge whether the context exists, if it exists, you can execute the next code if(context){//Start a new subpath context.beginPath();//We are going to draw two concentric circles as borders of the Clock // Нарисуйте большой круглый контекст. (194,100), и рассчитайте контекст точки. Moveto (194,100); // Нарисуйте маленький круг внутри (круглый Бог?) Контекст. Появляется ~ // Создать объект изображения и установить его SRC на изображение VAR Blue Fat Man Image = New Image (); Image.src = "2.png"; // Использовать метод контекста, чтобы нарисовать изображение из точки (25,25) и нарисуйте его в прямоугольнике с боковой длиной 150 контекста. (100,100) как новое происхождение, то есть (0,0) Context.Translate (100,100); // Нарисуйте наш контекст времени. secuations.filltext ("12",-5, -80); context.filltext ("6",-4,87); контекст.Появляются циферблаты вышеупомянутых часов, но самая важная причина, по которой часы - это то, что он может отображать время (бессмысленность), поэтому следующий шаг - нарисовать указатель.
В настоящее время функциональная часть
Функция сейчас время (контекст) {// Создать объект даты, чтобы получить локальное время var mydate = new Date (); // Получить часы, минуты, секунды var myhour = mydate.gethours (); // конвертировать час в 12-часовой формат, если (myhour> = 12) {myhour = myhour-12;} var mymin = mydate. getmintes ();););););););););););););););); mydate.getSeconds (); // Опишите час // использование для хранения радиан текущего часа на циферблате var ourarc; // Использовать 3 часа в качестве отправной точки окружности, представляя радианы по часовой стрелке, если (myhour <3) {hourarc = 2*math.pi- (3-myhour)*math.pi/6;} use {hourarc = math.pi- (3-myhour)*math.pi/6; (myhour-3)*math.pi/6;} // При указании на 3, 6, 9, 12, это точно множество 90 ° //, существует отклонение от угла, преобразованного в радиан, так что специальное обращение дается для переключения (myhour) {случай 0: hourarc = математика. = Math.pi; break;} // Функция времени вызова и время рисования (контекст, часарк, 60); // Нарисовать минуты // Использовать Radian var minarc на циферблате текущей минуты на циферблате; // Используйте 15 минут в качестве отправной точки окружности, чтобы представлять радиан по часовой стрелке if (mymin <15) {minarc = 2*math.pi- (15-Mymin)*math.pi/30;} else {minarc = (mymin-15)*math.pi/30;} // Протокол обработки, это все еще здесь, потому что угла сходится к Radians, так что, так что MyMin) {Слушан). Math.pi*3/2; Break; случай 15: minarc = 0; break; case 30: minarc = math.pi/2; break; case 45: minarc = math.pi; break;} // функция времени нарисовать и нарисовать (контекст, minarc, 80); // Нарисуйте секунду // Использование текущего второго, чтобы хранить Radian varc в диапазоне; if (mysec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30;} else {secarc = (mysec-15)*math.pi/30;} // Обработка в течение секунд, он все еще здесь, потому что угол преобразуется в Radians, и существует отклонение, так что Special Breaking-это Speak Breading (MySec) {case 0: secARC. 14: secarc = 0; break; case 29: secarc = math.pi/2; break; case 44: secarc = math.pi; break;} // Функция времени на рисунке вызовов и время рисования (контекст, secarc, 80, "red"); // Установить функцию времени ожидания. Функция четкого времени, это действительно легко использовать!Итак, как мы специально нарисуем указатели, когда работаем в контексте? Я тоже не знаю, так что давайте закончим это сегодня ~
Шучу, хе -хе, успокой
Следующим является функция Drawtime, которая имеет в целом четыре параметра (контекст, theArc, theLength, color = "#000"). Контекст видит через контекст, который является холстом, на первый взгляд, TheArc - это угол, когда мы хотим повернуть холст, TheLength представляет длину указателя, а цвет - это цвет указателя.
Функция DrawTime (контекст, theArc, theLength, color = "#000") {// Сохранить текущую среду Canvas и используйте ее в сочетании с методом восстановления для восстановления контекста Canvas.save (); // вращения Canvas, параметры, передаваемые вращающими. Начальная точка (0,0) context.moveto (0,0); // Нарисуйте путь к (TheLength, 0); // Нарисуйте этот путь с указанным контекстом цвета цвета. Если вы хотите увидеть путь, вам нужно использовать ход, чтобы отследить линию. Как проследить эту строку может быть определена несколькими атрибутами, которые мы использовали выше; // восстановить контекст контекста.restore ();}Хотя это подходит к концу, есть также очень важная функция четкого времени. Без этого ваши часы будут заняты на плотные секунды. Мы все несем ответственность за уход за пациентами с интенсивной фобией.
Функция Cleartime (context) {// Мы запускаем новый подлон, а затем нарисуем круг, полный красивого синего, охватывая указатели, которые мы нарисовали раньше, что эквивалентно очистке контекста циферблата. Beginpath (); контекст. ARC (0,0,80,0,2*Math.pi, false); context.fillstyle = "#4ba2cf"; Авария, так что вызовите его снова, и это будет вы, Pikachu (? Huh) var image = new Image (); image.src = "2.png"; // Эта координата отличается от координат, загруженных в первый раз, потому что мы изменили матрицу преобразования, вы все еще помните? Вы все еще помните? Следовательно, их координаты должны быть дополнительным контекстом.Ну, хорошо, сейчас это действительно здесь, почти пора купить еду ~ дорогие милые программисты, не забудьте поесть ~