PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Как нарисовать Солнце средствами HTML 5 Canvas?

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Antohsa	Отправлено: 15 Сентября, 2013 - 22:30:07
Новичок Покинул форум Сообщений всего: 2 Дата рег-ции: Сент. 2013 Помог: 0 раз(а)	Все привет. Ребята, подскажите, какие будут мысли по этому вопросу? Как бы нарисовать солнце очень близко похожее к картинке на канвасе? С чего бы начали вы? Заранее, спасибо. Прикреплено изображение (Нажмите для увеличения)

IllusionMH	Отправлено: 15 Сентября, 2013 - 23:44:18
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	Antohsa, тут скорее нужно посмотреть на то, как это делается в фш) Несколько текстур для поверхности, под разными углами и в разном масштабе. Все это обрезается круглой маской, а вот как вывести ореол - не знаю. Можно попытаться блюром, но не помню, есть ли такое в кансаве

Antohsa	Отправлено: 16 Сентября, 2013 - 01:08:16
Новичок Покинул форум Сообщений всего: 2 Дата рег-ции: Сент. 2013 Помог: 0 раз(а)	Хорошая идея... Посмотрел уроки в фотошопе, например, этот: http://www.youtube.com/watch?v=UKQBsswQPVw, и несколько других, все они основываются на наложение фильтра под название Clouds, после чего все становится намного проще. Как бы реализовать этот фильтр программно? Не совсем понимаю сам принцип.... =(( Со свечением и протубирансами нет проблем на первый взгляд, сложнее создать саму фактуру солнца..... (Отредактировано автором: 16 Сентября, 2013 - 01:10:37)

eko24	Отправлено: 29 Сентября, 2013 - 01:24:14
Гость Покинул форум Сообщений всего: 72 Дата рег-ции: Март 2011 Помог: 0 раз(а)	Не судите строго CODE (html): скопировать код в буфер обмена <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="600" height="600"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.fillStyle = "#000"; context.fillRect(0,0,600,600); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = pattern; context.fill(); }; imageObj.src = 'sun2.jpg'; </script> </body> </html> Пощупать можно тут: http://codepen[dot]io/anon/pen/flHus Тестурка Прикреплено изображение (Отредактировано автором: 29 Сентября, 2013 - 01:27:29)

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.