Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2017, 01:34
Новичок на форуме
Отправить личное сообщение для HuHguZ Посмотреть профиль Найти все сообщения от HuHguZ
 
Регистрация: 20.07.2017
Сообщений: 2

Изображение в окружности (canvas)
Здравствуйте, такой вопрос, как мне в качестве заливки окружности на canvas сделать какое-нибудь изображение? При этом окружность может перемещаться по экрану и изменять величину радиуса, изображение тоже должно изменяться. Возможно ли такое? Вот пример кода отрисовки окружности:
ctx.beginPath();
ctx.fillStyle = pl[8];
ctx.fill();
ctx.strokeStyle = pl[9];
ctx.lineWidth = Math.round(0.02 * pl[2]);
ctx.stroke();
ctx.arc(pl[0], pl[1], pl[2], 0, Math.PI * 2, false);
ctx.closePath();
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2017, 18:29
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,012

варианты:

1) делать обрезку (путь в виде окружности), потом на это дело рисовать картинку - отрисуется только внутри обрезки
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();


2) fillStyle в виде паттерна с картинкой. Потом рисовать закрашенную окружность - будет соответствующая заливка.
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2017, 18:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

http://know-online.com/post/canvas-zakruglit-kartinku
живой пример из ссылки выше
http://jsfiddle.net/t2userkq/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Движение по окружности Canvas Valentinka_1 Элементы интерфейса 2 06.07.2015 00:21
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Как открыть большое canvas изображение в IE10 function Internet Explorer 1 22.09.2013 19:24
Как в canvas нарисовать одно изображение на другом? Dimaz Общие вопросы Javascript 0 29.07.2013 20:11
Canvas импорт изображение из папки! Severtain Общие вопросы Javascript 1 13.06.2011 16:27