Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2018, 17:07
Интересующийся
Отправить личное сообщение для super-html Посмотреть профиль Найти все сообщения от super-html
 
Регистрация: 20.09.2017
Сообщений: 22

Рисование в 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>
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2018, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

super-html,
ctx.lineCap = "round"; // закругляем наконечник
 *!*  
 ctx.stroke();
 ctx.beginPath();
*/!*
    ctx.moveTo(50,650);
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2018, 17:53
Интересующийся
Отправить личное сообщение для super-html Посмотреть профиль Найти все сообщения от super-html
 
Регистрация: 20.09.2017
Сообщений: 22

Благодарю..

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

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

Код:
<!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 Кб, 0 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
рисование прямоугольника по движению мыши prizrak39 Events/DOM/Window 4 14.03.2013 15:36
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Рисование автофигур с помошью JavaScript Artem.A.Yakovenko Общие вопросы Javascript 5 20.06.2008 15:41