JS：改變顏色在畫布上的正方形只是javascript

我試着改變我的廣場上的顏色，而不使用jQuery或CSS。我怎樣才能同時改變所有方形的顏色？JS：改變顏色在畫布上的正方形只是javascript

P.s .:我是HTML5 + JS的新手。使用此代碼我可以在點擊按鈕後改變方形的顏色。但我想要一個可以改變已經在canvas區域顯示的所有方塊的按鈕。

HTML

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Paint Canvas</title> 
    </head> 
    <body> 
    <div id="container"> 
     <canvas id="imageView" width="600" height="300" onclick="createRect(red, 20,20);"/>  
    </div> 
    <input type="button" value="Green" id="green" onclick="GreenRect()"> 
    <input type="button" value="Red" id="red" onclick="RedRect()"> 
    <input type="button" value="clear canvas" id="clear" onclick="ImgClr()">   
    </body> 
</html>

CSS

canvas { border: 1px solid black;}

的JavaScript您繪製

var canvas = document.getElementById("imageView"); 
    var context = canvas.getContext("2d");  
    function createCircle(){   
    }  
    function createRect(fillColor, w, h) { 
     context.fillStyle = fillColor; 
     x = event.pageX; 
     y = event.pageY; 
     context.fillRect(x, y, w, h); 
    }  
    function GreenRect() { 
     context.fillStyle= 'green'; 
     context.stroke(); 
    }  
    function RedRect() { 
     context.fillStyle= 'red'; 
     context.stroke(); 
    }  
    function ImgClr() { 
     context.clearRect(0,0, 600, 300); 
    }

來源

2013-12-10 Jurafsky

創建[小提琴]（http://jsfiddle.net/）爲您的代碼 –

帆布廣場沒有t像「Javascript」中的「對象」。

從技術上講，你不能改變它們的顏色。

雖然你可以做的是用另一種顏色重新繪製它們。這是我的建議。你這裏有合適的參數： function createRect(fillColor, w, h)

所以你只想做一個createRect('red', ...)

來源

2013-12-10 14:21:41

認爲畫布作爲的表。在它上面繪製東西時，就像挑選一個形狀，將其放入墨水中，然後將其按在桌子上。您無法更改墨水顏色，但是您可以將其放在另一種墨水顏色中，然後在與第一次相同的位置上按下它。 –

JS：改變顏色在畫布上的正方形只是javascript

回答

相關問題