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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 23.11.2018, 15:15   #1
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию Не загружается изображение через new Image()

Не хочет загружаться изображение и заполнятся текстурой почему то.

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

<div id='test'></div>

        <script>
image = new Image()

image.onload = function()
{
  pattern = context.createPattern(image, 'repeat')
  context.fillStyle = pattern
  context.fillText('WickerpediA', 0, 0)
  context.strokeText('WickerpediA', 0, 0)
  document.getElementById('test').appendChild(pattern)
}
		image.src = '1.jpg'

        </script>
    </body>
</html>
usa-1450 вне форума Ответить с цитированием
Старый 23.11.2018, 15:52   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Нажимаешь f12 и там в консоле красным по белому будет написано, что "непонятная фигня" не имеет метода createPattern.

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
document.getElementById('test').app endChild(pattern)
Это вообще на грани добра и зла: непонятно что вставить непонятно куда. А потом на форум в больницу с лампочкой во рту или лимоном в вагине.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 23.11.2018, 21:07   #3
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Насчет той строки, я где-то увидел похожий пример и решил что той строкой я смогу загрузить фото в том месте на которое ссылается id но оказывается все не так..

Вот так сработало:

Код:
<!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, 'repeat');
	context.font = '200px Verdana'
    context.fillText('WickerpediA', 0, 300);
    context.strokeText('WickerpediA', 0, 300);
};

image.src = '1.jpg';


        </script>
    </body>
</html>
usa-1450 вне форума Ответить с цитированием
Старый 23.11.2018, 21:28   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Совсем другое дело. Вижу код не мальчика, но мужа.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 23.11.2018, 23:59   #5
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Решил попробовать нарисовать кривую, но почему-то вторая кривая не рисуется, первая нарисовалась без проблем.
Хочу сделать такую же кривую как слева, только справа..
Вот код:

Код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
<script src='OSC.js'></script>		
    </head>
    <body>

<canvas id='test' width='1250px' height='600px'></canvas>
        <script>
var c=document.getElementById("test");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);           // Create a starting point
ctx.lineTo(100,20);          // Create a horizontal line
//arcTo(x1,y1,x2,y2,радиус)
ctx.arcTo(150,20,150,150,50); // Create an arc
ctx.lineTo(150,220);         // Continue with vertical line
ctx.lineTo(500,220); 
ctx.lineTo(500,50); 
ctx.arcTo(500,50,600,20,50);
ctx.stroke();                // Draw it


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

Последний раз редактировалось usa-1450; 24.11.2018 в 00:01.
usa-1450 вне форума Ответить с цитированием
Старый 24.11.2018, 00:28   #6
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от usa-1450 Посмотреть сообщение
Хочу сделать такую же кривую как слева, только справа..
хотите сделать - делайте:
Код:
        <script>
var c=document.getElementById("test");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);           // Create a starting point
ctx.lineTo(100,20);          // Create a horizontal line

//arcTo(x1,y1,x2,y2,радиус)
ctx.arcTo(150,20,150,150,50); // Create an arc
ctx.lineTo(150,220);         // Continue with vertical line
ctx.lineTo(500,220); 
ctx.lineTo(500,70); 
ctx.arcTo(500,20,550,20,50);
ctx.lineTo(750,20); 
ctx.stroke();                // Draw it


        </script>
тщательно высчитывайте координаты точек. похоже, что если неверно задать параметры arcTo, то ничего касательная невозможно и ничего не выводится
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не загружается картинка в Image Xo66um Общие вопросы Delphi 2 08.06.2014 18:54
Изображение с размерами Image snakes Мультимедиа в Delphi 0 28.10.2013 19:44
Не загружается картинка в Image Вадим12091965 Microsoft Office Excel 1 06.11.2012 16:43
Изображение в image _-Re@l-_ Общие вопросы Delphi 2 16.05.2010 11:57
image не появляется изображение borik120 Microsoft Office Excel 1 23.02.2010 01:01