Изменить цвет элемента холста

Question

Я пытаюсь динамически изменить цвет линии, нарисованной на холсте ...

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey"

Это может быть событие при наведении курсора мыши, либо нажатие кнопки мыши или нажатия кнопки мыши, я хочу изменить цвет линии илисделать это жирным шрифтомМожно ли изменить цвет, добавив событие, или можно придать стиль событию для определенного элемента?

Answer 1

Очень близко.В некотором смысле вы не можете «изменить» цвет элемента на холсте, потому что у него нет графа сцены , или, другими словами, у него нет истории того, что было нарисовано нахолст.Чтобы изменить цвет линии, вам нужно будет перерисовать ее.

ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey";
ctx.stroke();

// To make the line bold and red
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Red";
ctx.lineWidth = 5;
ctx.stroke();

Если бы на холсте была более сложная сцена, вам пришлось бы перерисовать всю сцену.Существует множество библиотек Javascript, которые расширяют базовые функции тега canvas и предоставляют другие возможности рисования.Вы можете взглянуть на Обработка , это выглядит довольно впечатляюще.

Answer 2

У меня была та же проблема, я сделал это, переместив другую линию с другим цветом другого элемента canvas, чтобы она выглядела как линия, меняющая свой цвет динамически.

function drawGreyLine() {
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);
    ctx1.strokeStyle = "Grey"; // line color
    ctx1.moveTo(0, 0);
    ctx1.moveTo(0, 200);
    ctx1.lineTo(200, 200);
}

function drawColorLine() {
    x += dx;

    if (x <= 200) {
        ctx2.beginPath();
        ctx2.lineWidth = 5;
        ctx2.lineCap = "round";
        ctx2.strokeStyle = "sienna"; // line color
        ctx2.moveTo(0, 200);
        ctx2.lineTo(x, 200);
        ctx2.moveTo(200, 200);
        ctx2.stroke();
    }
}

Надеюсь, это решит вашу проблему.... :)

Answer 3

var canvas = document.getElementById('canvas');

        var ctx=canvas.getContext('2d');
var line1={x:10,y:10, l:40, h:1}
var down=false;
var mouse={x:0,y:0}
canvas.onmousemove=function(e){ mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};
this.onmousedown=function(){down=true};
this.onmouseup=function(){down=false} ; 
}

setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.beginPath()
ctx.moveTo(line1.x,line1.y)
ctx.lineTo(line1.x +line1.l,line1.y)
ctx.lineTo(line1.x +line1.l,line1.y+line1.h)
ctx.lineTo(line1.x,line1.y+line1.h)


 ctx.isPointInPath(mouse.x,mouse.y)? (ctx.fillStyle ="red",line1.x=down?mouse.x:line1.x,line1.y=down?mouse.y:line1.y):(ctx.fillStyle ="blue")
ctx.fill()
},100)