html5キャンバスを使用して6 * 6カラーパレットを作成するには

Question

HTML5キャンバスを使用してクリック可能な6 * 6カラーパレットを作成します。私はパレット上の各色のグリッドをクリックすることができ、背景色は選択された色に変わるはずです。

Answer 1

リアクトを使って、これを作った。たぶんこのことを見てから、あなたは何をする必要があるのか​​というアイデアを得るでしょう。

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>