Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.11.2018, 17:18   #1
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию Рисование в JavaScript

Вставил фотку 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>
usa-1450 вне форума Ответить с цитированием
Старый 22.11.2018, 17:30   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

а так?

Код:
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();
  };

Последний раз редактировалось Serge_Bliznykov; 22.11.2018 в 17:35.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 22.11.2018, 18:03   #3
usa-1450
Пользователь
 
Регистрация: 07.01.2015
Сообщений: 70
По умолчанию

Благодарю, Сергей Близнюков.

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

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

Код:
<!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>
Изображения
Тип файла: jpg Снимок.JPG (61.0 Кб, 127 просмотров)
usa-1450 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, как правильно выполнить задачу. JavaScript. HTML. CSS - JavaScript Bob123 JavaScript, Ajax 0 20.01.2018 22:07
JavaScript, Canvas рисование текста в пиксели? Angel5001 JavaScript, Ajax 3 11.03.2017 21:34
Рисование в JavaScript Ilya_L JavaScript, Ajax 0 22.10.2010 06:05
рисование линий (а в идеале стрелок) в javascript Rusl92 JavaScript, Ajax 2 21.01.2009 10:18
JavaScript :: Рисование beginner JavaScript, Ajax 7 11.08.2008 11:32