Canvas繪製色卡

使用canvas繪製一個色卡,思路就是通過循環改變rgb值

 // 色卡
        function draw() {
            var canvas = document.getElementById('box');
            !canvas.getContext && alert('canvas無法加載');
            var ctx = canvas.getContext('2d');
            for (var i = 0; i < 10; i++) {
                for (var j = 0; j < 10; j++) {
                   for(var z = 0; z < 10; z++){
                    // 設置rgb值
                    ctx.fillStyle = 'rgb(' + Math.floor(255 - 25.5 * i) + ',' +
                        Math.floor(255 - 25.5 * j) + ',' 
                        + Math.floor(0 + 25.5 * z) + ')';
                    ctx.fillRect(i * 50, j * 50, 50, 50);
                   }
                }
            }
        }
        draw();

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章