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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 25.11.2018, 21:30   #21
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Я им и пользуюсь, код вызывается, при нажатии на кнопку выдает такую ошибку:
Детали на фото. Я делаю по примеру из документации только копирую текст залитый градиентом, вместо фигуры которая копируется в документации. https://www.w3schools.com/tags/canvas_getimagedata.asp
Цитата:
Ошибка: Uncaught ReferenceError: context is not defined
Хоть функция определена координатами с которых я копирую

Код:
var imgData=context.getImageData(10,10,200,200);

Мне нужно сделать копию текста Hello и вставить на тот же холст после нажатия на кнопку
Изображения
Тип файла: jpg Снимок.jpg (52.7 Кб, 115 просмотров)

Последний раз редактировалось usa-1450; 25.11.2018 в 21:36.
usa-1450 вне форума Ответить с цитированием
Старый 25.11.2018, 21:51   #22
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Функция copy не знает о переменной, объявленной внутри функции myImage, это называется пространство имен.
Чтобы починить это, тебе надо либо контекст вынести в глобальное пространство (плохо).
Либо функцию copy задавать внутри myImage, но тогда её не увидит кнопка. Можно починить будет через addEventListener (так взрослые привязывают события к объектам). Тоже не самый изящный вариант, но лучше, чем срать в глобальный объект.
Впрочем, если цель всего этого изучение холста, без привязки к JavaScript, то можно и в глобал насыпать. Только вопрос зачем учить холст без JS?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 25.11.2018, 23:44   #23
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Цель разобраться как Javascript (-ом) это все можно сделать.
Решил все оформить в одной функции myImage()
И туда вставить эти 2 строки, первая которая копирует с позиции слово hello , а вторая вставляет его на том же холсте в нужную позицию, но в итоге при нажатии на кнопку copy наполняется только тень слова hello, не копируется hello. Пробовал глянуть как пользоваться addEventListener но он выдает ошибку в консоли что функция не определена. К примеру если написать так

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body onload='myImage()'>
<button onclick="myImage()">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, 150);
	
    //Окантовка для букв
   context.strokeText('Hello', 0, 150);
   context.addEventListener('click',function (){
	var imgData=context.getImageData(0,0,200,200);
   context.putImageData(imgData,1000,1000); },false)

};



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

        </script>

    </body>
</html>
Вариант 2. тоже не хочет работать, только наполняется тень, как бы я координаты не указывал копирования все равно только походу копируется тень и все.

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body onload='myImage()'>
<button onclick="myImage()">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, 150);
	
    //Окантовка для букв
   context.strokeText('Hello', 0, 150);
var imgData=context.getImageData(0,0,200,200);
context.putImageData(imgData,1000,1000);

};



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

        </script>

    </body>
</html>

Последний раз редактировалось usa-1450; 26.11.2018 в 00:00.
usa-1450 вне форума Ответить с цитированием
Старый 25.11.2018, 23:52   #24
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
<canvas id='test' width='1000px' height='1000px'></canvas>
Цитата:
Сообщение от usa-1450 Посмотреть сообщение
context.putImageData(imgData,1000,1 000);
вставка идет за пределами холста
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 26.11.2018, 00:33   #25
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Там какие размеры не меняешь уже внутри функций всё равно происходит та же самая ситуация. При нажатии на кнопку происходит наложение теней на тень но не копирование объекта на холст. Я понял о чём вы что размер холста и новое место куда я перемещаю объект идёт за его пределы. Ну если даже написать
Цитата:
context.putImageData(imgData,500,50 0);
происходит таже самая картина.

Последний раз редактировалось usa-1450; 26.11.2018 в 00:41.
usa-1450 вне форума Ответить с цитированием
Старый 26.11.2018, 01:38   #26
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

у меня все путем
ошибки CORS нет?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 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