改變顏色

Question

我試圖改變線對動態畫布繪製的顏色...

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

這可能是鼠標懸停事件或按鈕或鼠標點擊事件，我想改變顏色線或使其大膽。是否可以通過添加事件來改變顏色，或者是否可以對特定元素上的事件給出樣式？

Answer 1

我遇到了同樣的問題，我用另一種顏色的不同的畫布元素來移動另一條線，所以它給出了線的外觀動態變化的顏色。

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 2

非常接近。從某種意義上說，您無法真正「改變」畫布上某個元素的顏色，因爲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，它看起來相當令人印象深刻。

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)