更改画布元素的颜色 [英] Change color of canvas element

问题描述

我想尝试更改画布上动态绘制的线的颜色...

I am trying to change the color of line drawn on canvas dynamically...

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

它可能是mouseover事件或按botton或鼠标点击事件，我想改变线的颜色或使其粗体。是否可以通过添加事件来更改颜色，还是可以给特定元素上的事件赋予样式？

It could be mouseover event or press botton or mouse click event, I want to change the color of line or make it bold. Is it possible to change the color by adding event or is it possible to give style on an event on particular element?

推荐答案

我有同样的问题，我通过移动另一行与另一种颜色不同的canvas元素，

I was having the same problem, I did it by moving another line with another color of different canvas element, so it gives appearance of line changing its color dynamically.

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();
    }
}

希望这解决了您的问题... :)

Hope this solves your problem.... :)

这篇关于更改画布元素的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！