我正在尝试动态更改画布上绘制的线条的颜色......
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey"
可能是鼠标悬停事件或按下按钮或鼠标点击事件,我想更改线条的颜色或使其变为粗体。是否可以通过添加事件来更改颜色,还是可以在特定元素的事件上给出样式?
答案 0 :(得分:3)
非常接近。从某种意义上说,你不能真正“改变”画布上元素的颜色,因为it has no scene graph,或者换句话说,它没有在画布上绘制的历史。要更改线条的颜色,您必须重新绘制线条。
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,看起来非常令人印象深刻。
答案 1 :(得分:0)
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)
答案 2 :(得分:0)
我遇到了同样的问题,我是通过使用另一种颜色的不同画布元素移动另一条线来实现的,因此它会使线条的外观动态地改变其颜色。
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();
}
}
希望这能解决你的问题.... :)