html5输入框旁边有渐变色,HTML5画布上的多个点/颜色渐变

搜索一点点，我发现从Mozilla的开发网络这个例子

function draw() {

var ctx = document.getElementById('canvas').getContext('2d');

var radgrad = ctx.createRadialGradient(0,0,1,0,0,150);

radgrad.addColorStop(0, '#A7D30C');

radgrad.addColorStop(1, 'rgba(1,159,98,0)');

var radgrad2 = ctx.createRadialGradient(0,150,1,0,150,150);

radgrad2.addColorStop(0, '#FF5F98');

radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

var radgrad3 = ctx.createRadialGradient(150,0,1,150,0,150);

radgrad3.addColorStop(0, '#00C9FF');

radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

var radgrad4 = ctx.createRadialGradient(150,150,1,150,150,150);

radgrad4.addColorStop(0, '#F4F201');

radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

ctx.fillStyle = radgrad4;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad3;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad2;

ctx.fillRect(0,0,150,150);

ctx.fillStyle = radgrad;

ctx.fillRect(0,0,150,150);

}

基于INT这一点，你可以绘制每个单元为径向渐变，并使用一个总的透明色作为它的最后一个步骤，因此融合更好与其他细胞。

没有它，我认为你需要根据每个单元格的距离来计算每个像素的颜色。

通常情况下，如果制作voronoi纹理时，将表面划分成网格，然后为每个顶点分配一个颜色，然后用形成其单元格的vertext的距离内插一个像素的颜色。