Форум

super-html · #1 (**permalink**) 23.11.2018, 15:05

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

Код:

<!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 · #2 (**permalink**) 23.11.2018, 15:24

404 Not found?

super-html · #3 (**permalink**) 23.11.2018, 15:32

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

Nexus · #4 (**permalink**) 23.11.2018, 15:39

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

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

super-html · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 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 · #9 (**permalink**) 23.11.2018, 20:58

Dilettante_Pro, также благодарю, ваш пример увидел уже после того как отправил свой выше...

super-html · #10 (**permalink**) 23.11.2018, 23:48

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

Код:

<!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>

Форум

Справочник

Discord чат

Курсы javascript