更改画布元素的颜色

发布于 2024-11-03 07:40:58 字数 201 浏览 0 评论 0原文

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

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

可能是鼠标悬停事件或按下按钮或鼠标单击事件，我想更改线条的颜色或使其加粗。是否可以通过添加事件来更改颜色，或者是否可以为特定元素上的事件提供样式？

原文

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

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

俏︾媚 2024-11-10 07:40:58

非常接近。从某种意义上说，您无法真正“更改”画布上元素的颜色，因为

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 标签的基本功能，并提供其他绘图功能。您可能想看一下 Processing，它看起来相当令人印象深刻。

Very close. In a sense, you can't really "change" the color of an element on the canvas because it has no scene graph, or, in other words, it has no history of what has been drawn on the canvas. To change the color of a line, you would have to redraw the line.

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

If the canvas had a more complex scene going on, you would have to redraw the entire scene. There are numerous Javascript libraries that extend the base features of the canvas tag, and provide other drawing capabilities. You may want to take a look at Processing, it looks quite impressive.

回复收藏 0 原文

生生漫 2024-11-10 07:40:58

我遇到了同样的问题，我通过移动具有不同画布元素的另一种颜色的另一条线来做到这一点，因此它给出了动态改变其颜色的线的外观。

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

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

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.... :)

回复收藏 0 原文

同展鸳鸯锦 2024-11-10 07:40:58

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)

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)

回复收藏 0 原文

~没有更多了~