Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.11.2018, 19:18   #11
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
Есть функция которая делает обводку strokeStyle
Но она не работает и обводка не делается. В чем может быть проблема?
В том, что это не функция, а свойство, которое задает цвет линии, которая будет нарисована после уже методом, рисующем линию: context.stroke(), например, или context.strokeText().
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 24.11.2018, 19:34   #12
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Цитата:
которая будет нарисована после уже методом, рисующем линию: context.stroke(),
Но оно не рисует почему то, обводку текста красным не делает.

Если написать так:

Код:
    context.strokeText('Hello', 0, 300);
	context.strokeStyle('red');
	context.stroke();
выдается та же ошибка

Цитата:
Uncaught TypeError: context.strokeStyle is not a function
Вот так сработало, только вот непонятно как сделать окантовку к примеру штрихпунтирной линией.

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body>

<canvas id='test' width='1250px' height='600px'></canvas>

        <script>
image = new Image()

var image = document.createElement('img'),
    context = document.getElementById('test').getContext('2d');	

image.onload = function() {
    context.fillStyle = context.createPattern(image, 'no-repeat');
	context.strokeStyle='red'
	context.font = '200px Verdana'
//Окантовка для букв 
    context.fillText('Hello', 0, 300);
	
    //Окантовка для букв
    context.strokeText('Hello', 0, 300);
	
};

image.src = '1.jpg';
	  //Сдвиг тени право
  context.shadowOffsetX = 50
  //Сдвиг тени вниз
  context.shadowOffsetY = 100
  //размытость
  context.shadowBlur = 15
  context.shadowColor = 'brown'


 
        </script>
    </body>
</html>
Изображения
Тип файла: jpg Снимок.JPG (28.1 Кб, 64 просмотров)

Последний раз редактировалось Вадим Мошев; 25.11.2018 в 17:31.
usa-1450 вне форума Ответить с цитированием
Старый 24.11.2018, 21:10   #13
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Наконец-то нашел в документации..
Нужны всего 2 строки:

Код:
context.beginPath()
	context.setLineDash([10,10])
usa-1450 вне форума Ответить с цитированием
Старый 24.11.2018, 21:12   #14
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
Но оно не рисует почему то, обводку текста красным не делает.
Потому что ему нечего рисовать, нет ни текста, ни линии.

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
выдается та же ошибка
потому что осталась та же ошибка:
Цитата:
Сообщение от Naive Посмотреть сообщение
это не функция, а свойство
функция выполняет действие, свойство -- хранит состояние, которое можно (как правило) изменить или считать.
Очень сокращенный ликбез:
Контекст холста хранит состояния: цвет заливки, цвет линии и путь.
Путь напрямую менять нельзя, только через функции вроде прямых и кривых.
Затем, чтобы что-то отобразилось, надо вызвать определенную функцию рисования: рисовать линию и/или залить область.
-- Если в памяти контекста нет пути, то не будет ни линии, ни области. Поэтому в твоем случае ctx.stroke() и не сработал.
-- Для заливки и рисования линии есть много сокращенных функций, упрощающих работу с примитивами, вроде эллипсов, прямоугольников, секторов и сегментов, которые сами нарисуют кривые и тут же вызовут соответствующую функцию рисования.
-- Технически, работа с текстом относится к таким же функциям-оберткам. Только работа с текстом сильно сложнее, поэтому в контекст вшит отдельный инструмент, который сам вытягивает из настроек шрифта нужные кривые и применяет их при рисовании.

Итого:
чтобы чертова надпись рисовалась с красной обводкой, надо задать свойству strokeStyle красный цвет
Код:
context.strokeStyle = 'red';
А потом вызвать функцию рисования
Код:
context.strokeText('Hello', 0, 300);
И я бы рекомендовал тебе все манипуляции с холстом проводить линейно, в теле одной функции, чтобы понимать что и когда происходит. Нет желания такую же портянку писать про асинхронность.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 24.11.2018, 21:22   #15
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Благодарю Naive, только вот толщину линии не могу найти в документации для штрихпунтирной линии. Как изменить толщину линии обводки?
Изображения
Тип файла: jpg Снимок.JPG (27.8 Кб, 72 просмотров)
usa-1450 вне форума Ответить с цитированием
Старый 24.11.2018, 21:25   #16
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

там же, в документации lineWidth
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 24.11.2018, 21:27   #17
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Нашел.. context.lineWidth=15; благодарю.. Странно, почему-то в ИЕ градиент не заливается, во всех остальных браузерах работает.

Оформил все в функцию как вы описывали, пробую испытать метод который копирует с холста getImageData и вставить методом putImageData, но почему то ничего не происходит, копия вторая не делается.

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body onload='myImage()'>
<button onclick="copy()">Copy</button>
<canvas id='test' width='1000px' height='1000px'></canvas>

<script>
	function myImage(){
	image = new Image()
    var image = document.createElement('img'),
    context = document.getElementById('test').getContext('2d');		
    image.onload = function() {
    context.fillStyle = context.createPattern(image, 'no-repeat');
	context.strokeStyle='red'
	context.beginPath()
	context.lineWidth=5;
	context.setLineDash([5,5])
	context.font = '200px Verdana'
	//Заполнение для букв 
    context.fillText('Hello', 0, 200);
	
    //Окантовка для букв
   context.strokeText('Hello', 0, 200);
};

  image.src = '1.jpg';
//Сдвиг тени право
  context.shadowOffsetX = 50
  //Сдвиг тени вниз
  context.shadowOffsetY = 100
  //размытость
  context.shadowBlur = 15
  context.shadowColor = 'brown'
}
 
 function copy()
{
var imgData=context.getImageData(10,10,200,200);
context.putImageData(imgData,800,800);
} 
        </script>

    </body>
</html>
При нажатии на кнопку должна сделаться копия.

Последний раз редактировалось Вадим Мошев; 25.11.2018 в 17:32.
usa-1450 вне форума Ответить с цитированием
Старый 25.11.2018, 00:53   #18
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
почему то
в любой непонятной ситуации надо использовать отладчик и/или вывод в консоль.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 25.11.2018 в 00:55.
Alex11223 вне форума Ответить с цитированием
Старый 25.11.2018, 18:24   #19
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Отладчик никаких ошибок не выдает и изображение не отображает копию на холсте после нажатия на кнопку..
почему то.. Я вроде копирую с нужных координат и в нужные координаты переношу через функцию copy

Последний раз редактировалось usa-1450; 25.11.2018 в 19:04.
usa-1450 вне форума Ответить с цитированием
Старый 25.11.2018, 21:01   #20
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Отладчик и не может ничего выдавать. https://learn.javascript.ru/debugging-chrome

Узнайте для начала вызывается ли вообще ваш код.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пробую сделать плеер на базе библиотек VLC akf63 Visual C++ 0 06.05.2016 09:51
CSS Как сделать двусторонний градиент-фон hopeman HTML и CSS 6 25.04.2012 10:48
комп. графика и градиент цвета maccam Visual C++ 1 12.04.2012 10:21
Прозрачный градиент - Фон не просто прозрачный, есть градиент - к верху он светлеет DrStrangeLove HTML и CSS 3 26.05.2011 00:44
Не выводит javascript misher JavaScript, Ajax 2 12.01.2011 17:47