Копирование текста с градиентом на холст

@usa-1450 · Регистрация: 29.01.2013

Студворк — интернет-сервис помощи студентам

Не получается после нажатия на кнопку copy скопировать с одного места на холсте текста с градиентом на другое.
Пробую испытать метод который копирует с холста getImageData и вставить методом putImageData, но почему то ничего не происходит, копия вторая не делается.

PHP/HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body onload='myImage()'>
<button onclick="copy()">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, 200);
    
    //Окантовка для букв
   context.strokeText('Hello', 0, 200);
};
 
  image.src = '1.jpg';
//Сдвиг тени право
  context.shadowOffsetX = 50
  //Сдвиг тени вниз
  context.shadowOffsetY = 100
  //размытость
  context.shadowBlur = 15
  context.shadowColor = 'brown'
}
 
 function copy()
{
var imgData=context.getImageData(10,10,200,200);
context.putImageData(imgData,800,800);
} 
        </script>
 
    </body>
</html>

При нажатии на кнопку должна сделаться копия.

@atanov · 25.11.2018, 21:29

usa-1450, тег img Вы создали, но его не разместили appendChild в DOM. К тому же не понятно чьё содержимое Вы хотите скопировать и куда.

@usa-1450 · 25.11.2018, 21:35 **[ТС]**

Я делаю по примеру из документации только копирую текст залитый градиентом, вместо фигуры которая копируется в документации. https://www.w3schools.com/tags... gedata.asp

Ошибка: Uncaught ReferenceError: context is not defined

Хоть функция определена координатами с которых я копирую

Javascript

1	var imgData=context.getImageData(10,10,200,200);

Мне нужно сделать копию текста Hello и вставить на тот же холст после нажатия на кнопку

@usa-1450 · 25.11.2018, 23:50 **[ТС]**

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

PHP/HTML

<!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. тоже не хочет работать, только наполняется тень, как бы я координаты не указывал копирования все равно только походу копируется тень и все.

PHP/HTML

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

@atanov · 26.11.2018, 07:44

usa-1450, Вы сначала разберитесь, откуда, что и куда копируете. Вот Вам пример, всё прекрасно копируется:

HTML5

<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas в HTML5</title>
    </head>
    <body>
        <img id = "test1" src="74.jpg" style="width:15%;">
        <canvas id='test' width='100px' height='100px'></canvas>
        <button>Copy</button>
    </body>
<script type="text/javascript" src = "100.js"></script>

Javascript

document.addEventListener('DOMContentLoaded', getReady);
function getReady()
{
  document.getElementsByTagName('button')[0].addEventListener('click', copyToCanvas);
}
function copyToCanvas()
{
  document.getElementById('test').getContext('2d').drawImage(document.getElementById('test1'), 0, 0);
}

@atanov 632 / 474 / 170 Регистрация: 26.05.2016 Сообщений: 2,624
	25.11.2018, 21:29	2
	usa-1450, тег img Вы создали, но его не разместили appendChild в DOM. К тому же не понятно чьё содержимое Вы хотите скопировать и куда. 0

	26.11.2018, 07:44

Опции темы