Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Не загружается изображение через new Image() (https://javascript.ru/forum/css-html/75997-ne-zagruzhaetsya-izobrazhenie-cherez-new-image.html)

super-html 23.11.2018 15:05
Не загружается изображение через 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>

Nexus 23.11.2018 15:24
404 Not found?

super-html 23.11.2018 15:32
У меня фото есть 1.jpg, я его раньше загружал, а тут просто пустой экран и все..

Nexus 23.11.2018 15:39
Ну так откройте консоль (F12, вкладка "console") и убедитесь, что проблема не в отсутствии изображения по адресу, тем более он у вас относительный.

upd. Где у вас сам холст?
Переменная "context" не определена.
Переменные объявляются с помощью ключевого слова "var".
https://learn.javascript.ru/variables

super-html 23.11.2018 15:58
Переписал код, определил переменную pattern но все равно не хочет, выдает вот такую ошибку:
Цитата:
Uncaught ReferenceError: context is not defined
Ошибка почему-то на 16 строке. Изображение находится в одной папке и всегда загружалось с нее, там не нужно длинный путь писать.

Вот модернизированный код:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body>

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

        <script>
image = new Image()

image.onload = function()
{
  var 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>

Nexus 23.11.2018 16:07
Цитата:
Сообщение от super-html
Ошибка почему-то на 16 строке.
Цитата:
Сообщение от Nexus
Переменная "context" не определена.
Переменная image так и осталась без "var".

Попробуйте так:
var image = document.createElement('img'),
    context = document.getElementById('test').getContext('2d');

image.onload = function() {
    context.fillStyle = context.createPattern(image, 'repeat');
    context.fillText('WickerpediA', 0, 0);
    context.strokeText('WickerpediA', 0, 0);
};

image.src = '1.jpg';

Dilettante_Pro 23.11.2018 16:37 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body>
       <canvas id='test' width='600px' height='600px'></canvas>
       <script>
          var canvas = document.querySelector("#test"),
                context = canvas.getContext('2d'),
                image = new Image();
          image.src = 'https://javascript.ru/cat/list/donkey.gif';
          image.onload = function() {
              var pattern = context.createPattern(image, 'repeat');
              context.font = "24px serif";
              context.fillText('WickerpediA', 0, 30);
              context.rect(0,50,600,600);
              context.fillStyle = pattern;
              context.fill();
          }
        </script>
    </body>
</html>

super-html 23.11.2018 20:57
Благодарю Нексус, вот вроде отображает нормально.

Код:
<!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>

super-html 23.11.2018 20:58
Dilettante_Pro, также благодарю, ваш пример увидел уже после того как отправил свой выше...

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

Код:
<!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>


Часовой пояс GMT +3, время: 16:35.