Question

我试着在不使用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);  
    }

Answer 1

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

从技术上讲，你不能改变它们的颜色。

但是，你可以做的是用另一种颜色重绘它们。这是我的建议。你有正确的参数： function createRect(fillColor, w, h)

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

JS：用javascript改变画布上的颜色方块

1 个答案: