Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Рисование в JavaScript (https://javascript.ru/forum/css-html/75988-risovanie-v-javascript.html)

super-html 22.11.2018 17:07
Рисование в 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>

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

super-html 22.11.2018 17:53
Вложений: 1
Благодарю..

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

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

Код:
<!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>


Часовой пояс GMT +3, время: 12:56.