Форум

super-html · #1 (**permalink**) 22.11.2018, 17:07

Вставил фотку 1.jpg и перечеркнул картинку рисованием через методы объекта image. Хочу сделать одну линию красную, вторую фиолетовую, но когда меняю цвет, все меняется на фиолетовый. Мне нужно одна линия красная, другая фиолетовая.

Меняю таким способом :

Код:

	ctx.strokeStyle = 'magenta';

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Image в 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.lineCap = "round"; // закругляем наконечник
	ctx.moveTo(50,650);
	ctx.strokeStyle = 'magenta';
	ctx.lineTo(650,50);
    ctx.stroke();
  };
  img.src = '1.jpg';
}	
        </script>
    </body>
</html>

рони · #2 (**permalink**) 22.11.2018, 17:25

super-html,

ctx.lineCap = "round"; // закругляем наконечник
 *!*  
 ctx.stroke();
 ctx.beginPath();
*/!*
    ctx.moveTo(50,650);

super-html · #3 (**permalink**) 22.11.2018, 17:53

Благодарю..

Решил немного модифицировать код и сделал такое как на фото ниже.

Как сделать так через стиль трансформ чтобы эти линии вращались?
Картинку можно вращать через трансформ, а вот линии как?

Код:

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

Форум

Справочник

Discord чат

Курсы javascript