Показать сообщение отдельно
  #12 (permalink)  
Старый 25.11.2018, 23:38
Интересующийся
Отправить личное сообщение для super-html Посмотреть профиль Найти все сообщения от super-html
 
Регистрация: 20.09.2017
Сообщений: 22

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

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

Код:
<!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>
Ответить с цитированием