Цель разобраться как 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> |