canvas draw rectangle fill color

Canvas是一个HTML5元素，可以用来在Web页面上绘制图形。要绘制填充颜色的矩形，可以使用Canvas API中的 fillRect() 方法。

fillRect() 方法需要四个参数，分别是矩形的左上角x坐标、左上角y坐标、宽度和高度。例如，要在Canvas上绘制一个宽度为100像素、高度为50像素、左上角x坐标为50，左上角y坐标为50，填充颜色为红色的矩形，可以使用以下代码：

var canvas = document.getElementById("myCanvas"); // 获取Canvas元素
var ctx = canvas.getContext("2d"); // 获取Canvas上下文
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(50, 50, 100, 50); // 绘制填充矩形
在这个例子中，我们首先获取了Canvas元素，并使用getContext()方法获取了Canvas上下文。然后，我们使用fillStyle属性设置填充颜色为红色。最后，我们使用fillRect()方法绘制了一个宽度为100像素、高度为50像素、左上角x坐标为50，左上角y坐标为50，填充颜色为红色的矩形。
如果您想绘制边框矩形而不是填充矩形，可以使用strokeRect()方法。它的用法与fillRect()方法相同，只是它不会填充矩形内部的颜色，而是只绘制边框。
希望这个回答对您有所帮助，如果您有任何其他问题，请随时提出。