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

回答

相关问题