Javascript.RU

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

Вставка текста в картинку canvas
Здравствуйте!

Прошу помочь, пожалуйста.

Есть генерация картинки на canvas. Есть поле ввода. Нужно, чтобы введя слова они появлялись на картинке.
Вот код, не пойму почему не работает. В процессе возни что-то получилось, но выводилось "object HTMLinputElement", вернул обратно.

P.S: Я только начинаю работать с JS, извините если код содержит серьезные ошибки =).

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">		  			 
<button type="submit" id="poslat">Введите текст</button>
<br>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,200);

ctx.font = "30px Arial";
ctx.strokeText(tekt,70,100);

</script>


<script>
$("#poslat").on("click", function(){
var tekt = document.getElementById('nashinput').value;

});
</script>

</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2014, 22:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,490

Ошибки:
1. Код в первом script выполнится сразу, до того как мы введём какой либо текст.
2. var задаёт локальную переменную в пределах функции, потому код из первого script всё равно бы никак не смог увидеть переменную tekt из функции во втором.
3. $ - это библиотека jquery, подключение которой у вас отсутствует, потому также работать не должно. Перед тем как начать использовать jq рекомендуется попривыкнуть к обычному javascript, иначе можно заработать jquery головного мозга.

<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="300" height="200" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">                    
<button type="submit" id="poslat">Введите текст</button>
<br>

 
<script>
document.getElementById('poslat').onclick = function(){
var tekt = document.getElementById('nashinput').value;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
 
// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,200);
 
ctx.font = "30px Arial";
ctx.strokeText(tekt,70,100);
};
</script>
 
</body>
</html>
__________________
29375, 35

Последний раз редактировалось Aetae, 07.07.2014 в 22:27.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2014, 00:16
Новичок на форуме
Отправить личное сообщение для bitcoin Посмотреть профиль Найти все сообщения от bitcoin
 
Регистрация: 07.07.2014
Сообщений: 2

Спасибо! + отдельно за подробное описание ошибок

Я до jquery еще не дошел, а $ был в одном из примеров, которые я перебирал, пытаясь найти ошибку. Решил с ним.
Ответить с цитированием
  #4 (permalink)  
Старый 01.03.2017, 15:29
Новичок на форуме
Отправить личное сообщение для Альбинкаа Посмотреть профиль Найти все сообщения от Альбинкаа
 
Регистрация: 01.03.2017
Сообщений: 1

Подскажите пожалуйста как сделать как на картинке или какую прогу скачать
Ответить с цитированием
  #5 (permalink)  
Старый 01.03.2017, 15:37
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

GIF.JS
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление текста canvas IVAAAAN Общие вопросы Javascript 6 12.07.2013 15:00
Вставка текста в ckeditor с отменой тегов zhurchik Библиотеки/Тулкиты/Фреймворки 1 03.03.2012 15:24
Вывод текста при клике на картинку KTIM Общие вопросы Javascript 7 05.12.2011 05:11
Вставка текста в форму при нажатии на ссылку Sergei1988 Общие вопросы Javascript 2 03.04.2011 22:05