JS：仅使用 javascript 更改画布上的颜色方块答案

【问题标题】：JS: change color square on canvas with just javascriptJS：仅使用 javascript 更改画布上的颜色方块
【发布时间】：2013-12-10 08:42:26
【问题描述】：

我正在尝试在不使用 jquery 或 CSS 的情况下更改我的方块的颜色。如何同时更改所有正方形颜色？

P.s.：我是 HTML5+JS 的新手。使用此代码，我可以在单击按钮后更改方形颜色。但我想要一个按钮，可以更改画布区域上已经显示的所有方块。

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

【问题讨论】：

为您的代码创建一个fiddle

标签： javascript html canvas colors

【解决方案1】：

您正在绘制的画布方块不是 Javascript 中的“对象”。

从技术上讲，您无法更改它们的颜色。

不过，您可以用另一种颜色重新绘制它们。这就是我的建议。您在这里有正确的参数： function createRect(fillColor, w, h)

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

【讨论】：

把画布想象成一张桌子。在上面画东西的时候，就像是挑一个形状，放进墨水里，然后压在桌子上。您无法更改墨水颜色，但您可以将形状换成另一种墨水颜色，然后将其按在桌面上与第一次相同的位置。