JS:只需javascript即可更改画布上的颜色方块

JS: change color square on canvas with just javascript

本文关键字：颜色 方块 可更改 只需 javascript JS      更新时间：2024-05-23

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

附言：我是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);  
    }

您正在绘制的画布正方形不像Javascript中那样是"对象"。

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

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

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

相关文章：