Здравствуйте, мои дорогие друзья, я презираю переднюю часть себя, впервые пишу блоги и не пишу хорошо, пожалуйста, простите меня понять.
Перед обучением, я думаю, что вы умны. с этим здесь;
Ой! Картинка ниже является простым эффектом после нашего завершения.
1. Определите холстПрежде всего, мы теперь вставляем тег <Canvas> в файл HTML, чтобы определить размер холста. В то же время, цвет фона холста установлен во внутренней таблице стилей (чтобы посмотреть, когда он удобен для рисования);
<! Canvas {founale:#5151a2;} </style> </head> <body> <canvas id = width canvas = 800 высота = 600> </body> </html>Следующее ядро состоит в том, чтобы нарисовать ветряную мельницу в местной среде JS; 2D графика на холсте;
<script type = text/javascript> // Получить 2D контекст получения холста.2. Нарисуйте основу для ветряной мельницы
Геометрическая фигура основания для ветра выглядит как стройный и стройный трапециат. Посмотрите прямо на код ~~!
// Определите функцию, нижняя основа функции Windmill () {ctx.beginpath (); (0,#CCC); = Liner; Начальная точка линии CTX.LineTo (410 600);Давайте посмотрим на эффект на странице, это просто?
(Я чувствую, что я слишком много ~! ~!)
3. Нарисуйте листьяСледующая часть будет наиболее важным местом в этой анимации. Можно также иметь в вашем сердце. Как следует нарисовать форму листьев? Могут ли листья быть скопированы и вставлены? Ответ, безусловно, в порядке, давайте сделаем это!
Анализ мышления:
1) Поскольку форма трех листьев точно такая же, нам нужно только нарисовать лист. Просто назовите это функцией bind ()! Пересечение Просто назовите это! Почему! Ваш TM слишком умный
2) Три листа имеют круглое сердце. Метод Transtate () используется здесь, мобильная система координат!
3) Самое сложное - понять, как здесь реализована анимация, потому что принцип анимации повлияет на структуру документа нашей живописи: структура листьев:
Прежде всего, мы создаем новую среду рисунка, мы называем ее средой 1, мы нарисуем первый лист в среде 1; Призыв к листу наверх (), нарисуйте два листья; ;
Если мы хотим достичь анимации, нам нужно только повернуть среду рисунка 1 первого листа. Пересечение Заграда: 6666666
4) В конце концов, некоторые основные стили внешнего вида отлаживаются! Такие как градиенты, прозрачность и т. Д.!
Нарисуйте листьяКогда я нарисовал эту форму листьев, меня медленно отладили.
Здесь я объявляю переменную var num = 0;, как параметр изменений в количестве вращения среды: тогда давайте посмотрим напрямую на код! Пересечение Пересечение
Var num = 0; , вращение системы координат ctx.rotate ((math.pi/180)*num); Liner1.addcolorsstop (0,#CCC); первый раз ctx.beginpath (); Вращается 120 ° Ctx.save (); 120); // Ответ перед вторым состоянием (вращающаяся система координат) // Нарисуйте ctx.beginpath (); CCC); Система координат перевода) num+= 5;停的变化 ， ****** ************************************************* ********************************************* ********************************************* ********************************************* *************, каждый лист является повторяющимся кодом, вот функция функции упаковки bind () {ctx.moveto (0,0); 30, -12); 12,30,12); 4. Установите анимациюЭта часть анимации относительно проста. Пересечение Пересечение
SetInterval (function () {ctx.clearrect);}, 50);Исходный код: https://github.com/224137748/canvas/blob/master/windmill.html
Выше всего содержимое этой статьи.