Javascript 使用html5画布创建6*6调色板

我想用HTML5画布创建一个可点击的6*6调色板。我应该能够单击调色板上的每个颜色网格，并且背景颜色应更改为选定的颜色。

使用React，我完成了此操作。也许在看了这些之后，你会知道你需要做什么

类调色板扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={color:'#FFFFFF'}；
}
设置颜色（行、列）{
const color=this.getColor（行、列）；
this.setState（{color}）；
document.body.style.backgroundColor=颜色；
}
getColor（行、列）{
const hue=数学地板（col/this.props.height*360）；
常数sat=100；
const lit=数学楼层（（1-（行+1）/（this.props.width+1））*100）；
返回'hsl（${hue}，${sat}%，${lit}%）`；
}
render（）{
常量行=[]；
for（设i=0；i
);
}
推(
{cols}
);
}
返回(
{rows}
);
}
}
render（，document.body）
调色板{
显示器：flex；
弹性：1；
弯曲方向：立柱；
光标：指针；
}
.行{
显示器：flex；
弹性：1；
弯曲方向：行；
}
上校{
宽度：20px；
高度：20px；
}

您不需要canvas来执行此操作-事实上，使用canvas意味着您需要实现自己的光标单击跟踪逻辑。为什么要使用canvas呢？按照@Dai的注释：只需使用简单的HTML表格，让JavaScript在
for
循环中生成所有表格。在每次迭代中，让它创建html元素，并为每次迭代向
rgb
颜色中添加一定量。这不是一个明确的问题。。。好的，您可以使用
context.fillStyle='red'
设置画布填充颜色，然后使用
context.fillRect（column*columnSize，row*rowSize，columnSize，rowSize）
在画布上使用
mycanvassement.onclick=function（event）{…}来监听单击事件。您可以使用
anyElement.style.backgroundColor='red'
@Dai.更改元素的背景色。。我的任务是使用HTML5画布。我可以用表格解决它。重新组织我的问题：我想创建一个6*6调色板（网格），每个网格有不同的颜色。选择单色网格时，我的背景应更改为该特定颜色。要添加此颜色，可以使用
cxt.getImageData（）
获取单击的正方形的颜色。然后你要做的就是根据颜色设置背景。（这只是一个基本的待办事项列表。其余的你必须弄清楚。试试谷歌搜索！）谢谢。这很有帮助。我想知道是否也可以使用Bootstrap。@NandanaSrinivasan如果你要使用Canvask，使用Bootstrap是没有意义的。我对JS及其框架一无所知。非常感谢。