Ich möchte eine anklickbare 6 * 6 Farbpalette mit HTML5 Canvas erstellen. Ich sollte in der Lage sein, auf jedes Farbraster auf der Palette zu klicken und die Hintergrundfarbe sollte zu der ausgewählten Farbe wechseln.Um eine 6 * 6 Farbpalette mit html5 Leinwand zu erstellen
Mit React habe ich das gemacht. Vielleicht haben Sie nach dem Durchschauen eine Vorstellung davon, was Sie alles tun müssen.
class Palette extends React.Component {
constructor(props) {
super(props);
this.state = { color: '#FFFFFF' };
}
setColor(row, col) {
const color = this.getColor(row, col);
this.setState({ color });
document.body.style.backgroundColor = color;
}
getColor(row, col) {
const hue = Math.floor(col/this.props.height * 360);
const sat = 100;
const lit = Math.floor((1 - (row + 1)/(this.props.width + 1)) * 100);
return `hsl(${hue},${sat}%,${lit}%)`;
}
render() {
const rows = [];
for (let i = 0; i < this.props.height; i++) {
const cols = [];
for (let j = 0; j < this.props.width; j++) {
cols.push(
<div
className="col"
onClick={
() => this.setColor(j, i)
}
style={{
backgroundColor: this.getColor(j, i)
}} />
);
}
rows.push(
<div className="row">
{cols}
</div>
);
}
return (
<div className="palette">
{rows}
</div>
);
}
}
ReactDOM.render(<Palette width={6} height={6} />, document.body);.palette {
display: flex;
flex: 1;
flex-direction: column;
cursor: pointer;
}
.row {
display: flex;
flex: 1;
flex-direction: row;
}
.col {
width: 20px;
height: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>Um das hinzuzufügen, können Sie 'cxt.getImageData()' verwenden, um die Farbe des Quadrats zu erhalten, auf das Sie klicken. Dann müssen Sie nur den Hintergrund entsprechend dieser Farbe einstellen. (Dies ist nur eine grundlegende ToDo-Liste. Den Rest müssen Sie herausfinden. Versuchen Sie zu googeln!) – Brendan
Danke. das hilft. Ich würde gerne wissen, ob dies auch mit Bootstrap möglich ist. –
@NandanaSrinivasan Es gibt keinen Grund Bootstrap zu verwenden, wenn Sie eine Leinwand verwenden werden –
Sie Leinwand nicht brauchen, dies zu tun - und in der Tat Leinwand bedeuten, dass Sie Ihre eigene Cursor Klick-Tracking-Logik implementieren werden müssen. Warum möchten Sie Leinwand verwenden? – Dai
Zusammen mit @Dais Kommentar: Verwenden Sie einfach einfache HTML - Tabellen und lassen Sie JavaScript alle in einer 'for' - Schleife generieren. Erstellen Sie in jeder Iteration das html-Element und fügen Sie für jede Iteration eine bestimmte Menge einer 'rgb'-Farbe hinzu. – Brendan
Keine klare Frage ... Nun, Sie können die Canvas-Füllfarbe mit 'context.fillStyle = 'red' setzen und dann eines Ihrer 6x6-Rechtecke mit' context.fillRect (column * columnSize, row * rowSize, columnSize , rowSize) 'Sie können auf Klickereignisse im Canvas mit' myCanvasElement.onclick = function (event) {...}; 'hören. Sie können die Hintergrundfarbe eines Elements ändern mit 'anyElement.style.backgroundColor = 'red'' – markE