Canvas制作简单的RGB系列图案

前言

  今天突然回想起之前做过一个调色板，但是印象不是很清晰了，自己就试着试着尝试写了下，发现还是一次就搞定了，幸好记忆大大没有抽风，闲话少说，请往下看。

一个最简单的RGB调色板

制作过程

• 第一步：html中放入一个canvas画图，边长为500px的的正方形。

html

<canvas id="canvas" width="500" height="500"></canvas>

• 第二步：开始实现该图效果

js

let ctx = document.getElementById('canvas').getContext('2d');
    for (let i=0;i<10;i++){
        for (let j=0;j<10;j++){
            ctx.fillStyle = 'rgb(' + Math.floor(255-25*i) + ',' +
                Math.floor(255-25*j) + ',0)';
            ctx.fillRect(j*50,i*50,50,50);
        }
    }

解析原理

1. 因为画布是边长为500px的正方形，我们希望一行展示10个格子，所以每个格子边长为50px。
2. 因为RGB值得界点是0到255，针对于10个格子，255-（10 * x） ≈ 0 可以算出，x ≈ 25 即可，不用完全等于25.5，但是也可以这么做，并不会影响。

提示：canvas画图画出的所有图案，都是图片，说明意思呢？意思就是鼠标右键点击canvas画布，是可以直接另存为图片到桌面的，而且是PNG格式，十分完美哦。

举一反三

js

let ctx = document.getElementById('canvas').getContext('2d');
    for (let i=0;i<10;i++){
        for (let j=0;j<10;j++){
            ctx.strokeStyle = 'rgb(0,' + Math.floor(255-25*i) + ',' +
                Math.floor(255-25*j) + ')';
            ctx.beginPath();
            ctx.arc(25+j*25,25+i*25,14,0,Math.PI*2,true);
            ctx.stroke();
        }
    }

奇妙的RGB环

后言

  Canvas博大精深，如果大家喜欢，后期将会陆续推出更多的canvas小教程哦，谢谢大家。

说明

原创作品，禁止转载和伪原创，违者必究！