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