<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas в HTML5</title>
</head>
<body onload='draw()'>
<canvas id='canvas' height='800' width='1000'></canvas>
<script>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
//Загружается изображение и вставляется с координат х = 50 у = 50
ctx.drawImage(img,50,50);
ctx.beginPath();
//Начинаем рисовать с координат х = 50, у = 50
ctx.moveTo(50,50);
ctx.lineWidth=15; // толщина линии
ctx.strokeStyle = "#ff0000"; // цвет линии
ctx.lineTo(650,650);
ctx.stroke();
ctx.beginPath()
ctx.lineCap = "round"; // закругляем наконечник
ctx.moveTo(50,650);
ctx.strokeStyle = 'magenta';
ctx.lineTo(650,50);
ctx.stroke();
ctx.beginPath()
ctx.moveTo(350,50);
ctx.lineCap = "round"; // закругляем наконечник
ctx.strokeStyle = 'blue';
ctx.lineTo(350,650);
ctx.stroke();
ctx.beginPath()
ctx.moveTo(50,350);
ctx.lineCap = "round"; // закругляем наконечник
ctx.strokeStyle = 'green';
ctx.lineTo(650,350);
ctx.stroke();
};
img.src = '1.JPG';
}
</script>
</body>
</html> |