Javascript HTML画布-形状之间的颜色转换（形状不重叠）

图像是我期待使用html画布，而不使用模糊或阴影来实现的

问题： 有并没有办法从图像的左侧部分实现图像的右侧部分

这道题的重点是（基础图）

var canvas=document.createElement（'canvas'），
d=canvas.width=canvas.height=400，
sq_尺寸=d/10，
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
var color=[“rgb（10110,10）”，“rgb（81169255）”，“rgb（81239255）”，
“rgb（81255202）”，
"rgb(81255132),"rgb(99255,81),"rgb(169255,81),，
"rgb(239255,81),"rgb(255202,81),"rgb(255132,81)";；
var x=0，len=color.length；
对于（变量i=0；i

无需实施模糊即可获得的最接近距离

可以使用图像平滑来模糊分辨率非常低的图像。然后使用

例子

pixelSize

控制模糊量。值1是最大值，并且随着该值变大而变小。必须是整数值，例如1、2、3、4、

注：结果将因所使用的设备和浏览器/版本而异

requestAnimationFrame（animationLoop）；
const size=canvas.width；
const ctx=canvas.getContext（'2d'）；
var mix=123；//相当于过渡
常量transitionTime=2；//每次转换秒数
常量样例=[0,1,2]；
常量像素大小=2；
//eCurve p=1线性曲线[默认p=2]是二次曲线p=3三次曲线，依此类推。
常数eCurve=（v，p=2）=>v<0？0:v>1？1:v**p/（v**p+（1-v）**p）；
常数cols=[
[10, 110, 10], [81, 169, 255], [81, 239, 255], [81, 255, 202], [81, 255, 132], 
[99, 255, 81], [169, 255, 81], [239, 255, 81], [255,202, 81], [255,132,81]
];
const img=document.createElement（“画布”）；
img.height=img.width=swatches.length*像素大小；
常量imgCtx=img.getContext（'2d'）；
函数随机样本（）{
swatches.forEach（y=>{swatches.forEach（x=>{
imgCtx.fillStyle=“rgb（“+cols[Math.random（）*cols.length | 0”）。连接（“，”+”）；
imgCtx.fillRect（x*pixelSize，y*pixelSize，pixelSize，pixelSize）；
}); });
}
函数animationLoop（）{
混合=（混合>=4？（随机样本（），0）：混合）+1/（过渡时间*60）；
ctx.globalAlpha=1；
ctx.imageSmoothingEnabled=假；
ctx.drawImage（img，0，0，size，size）；
ctx.imageSmoothingEnabled=真；
常数a=混合物%2；
ctx.globalAlpha=eCurve（a>1？2-a:a，3）；
ctx.drawImage（img，0，0，size，size）；
requestAnimationFrame（animationLoop）；
}

---

无需实施模糊即可获得的最近距离

可以使用图像平滑来模糊分辨率非常低的图像。然后使用

例子

pixelSize

控制模糊量。值1是最大值，并且随着该值变大而变小。必须是整数值，例如1、2、3、4、

注：结果将因所使用的设备和浏览器/版本而异

requestAnimationFrame（animationLoop）；
const size=canvas.width；
const ctx=canvas.getContext（'2d'）；
var mix=123；//相当于过渡
常量transitionTime=2；//每次转换秒数
常量样例=[0,1,2]；
常量像素大小=2；
//eCurve p=1线性曲线[默认p=2]是二次曲线p=3三次曲线，依此类推。
常数eCurve=（v，p=2）=>v<0？0:v>1？1:v**p/（v**p+（1-v）**p）；
常数cols=[
[10, 110, 10], [81, 169, 255], [81, 239, 255], [81, 255, 202], [81, 255, 132], 
[99, 255, 81], [169, 255, 81], [239, 255, 81], [255,202, 81], [255,132,81]
];
const img=document.createElement（“画布”）；
img.height=img.width=swatches.length*像素大小；
常量imgCtx=img.getContext（'2d'）；
函数随机样本（）{
swatches.forEach（y=>{swatches.forEach（x=>{
imgCtx.fillStyle=“rgb（“+cols[Math.random（）*cols.length | 0”）。连接（“，”+”）；
imgCtx.fillRect（x*pixelSize，y*pixelSize，pixelSize，pixelSize）；
}); });
}
函数animationLoop（）{
混合=（混合>=4？（随机样本（），0）：混合）+1/（过渡时间*60）；
ctx.globalAlpha=1；
ctx.imageSmoothingEnabled=假；
ctx.drawImage（img，0，0，size，size）；
ctx.imageSmoothingEnabled=真；
常数a=混合物%2；
ctx.globalAlpha=eCurve（a>1？2-a:a，3）；
ctx.drawImage（img，0，0，size，size）；
requestAnimationFrame（animationLoop）；
}

---

这个解决方案最适合我。符合我的大数据集。 不是O（1），我也不可能认为它是，甚至是O（n）（小玩笑）

注意：代码可以进一步优化

拨弄

var canvas=document.createElement（'canvas'），
d=canvas.width=canvas.height=250，
sq_尺寸=d/5，
ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
setAttribute（'id'，'cav'）；
var color=[“rgb（10110,10）”，“rgb（81169255）”，“rgb（81239255）”，“rgb（81255202）”，“rgb（81255132）”，“rgb（99255,81）”，“rgb（169255,81）”，“rgb（239255,81）”，“rgb（255202,81）”，“rgb（255132,81）”；
var x=0，len=color.length；
var-prevcolorh；
var colorobj={}；
对于（var i=0；ivar canvas = document.createElement('canvas'),
d = canvas.width = canvas.height = 400,
sq_size = d / 10,
ctx = canvas.getContext('2d');
document.body.appendChild(canvas); 

var color=["rgb(10,110,10)", "rgb(81,169,255)","rgb(81,239,255)", 
"rgb(81,255,202)", 
"rgb(81,255,132)","rgb(99,255,81)","rgb(169,255,81)", 
"rgb(239,255,81)", "rgb(255,202,81)","rgb(255,132,81)"];

var x=0, len=color.length;
for(var i=0; i < d; i++){
  while(x < d) {
    var c = Math.floor(Math.random() * len);
    
    ctx.fillStyle = color[c];
    ctx.fillRect(x,i,sq_size,sq_size);
    x = x + sq_size;
  }
  x = 0;
  i = i+sq_size;
}

var canvas = document.createElement('canvas'),
d = canvas.width = canvas.height = 250,
sq_size = d / 5,
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.setAttribute('id','cav');

var color=["rgb(10,110,10)", "rgb(81,169,255)","rgb(81,239,255)", "rgb(81,255,202)", "rgb(81,255,132)","rgb(99,255,81)","rgb(169,255,81)", "rgb(239,255,81)", "rgb(255,202,81)","rgb(255,132,81)"];

var x=0, len=color.length;
var prevcolorh;
var colorobj = {};
for(var i=0; i < d;){
    colorobj[i] = {};
    while(x < d) {
        var c = Math.floor(Math.random() * len);
        colorobj[i][x] = color[c];
    
        var gradient = ctx.createLinearGradient(x, 0, x+sq_size, 0);
    
        var a = (prevcolorh !== undefined) ? prevcolorh : colorobj[i][x];
    
        gradient.addColorStop(0, a);
        gradient.addColorStop(1, colorobj[i][x]);
    
        prevcolorh = colorobj[i][x];
    
        ctx.fillStyle = gradient;
        ctx.fillRect(x, i, d, d);
    
        x = x + sq_size;
    }
    x = 0;
    i = i+sq_size;
}

var rgbs = {};
for(var i=0; i<d; i+=sq_size) {
    var imgd = ctx.getImageData(0, i+(sq_size/2), d, sq_size);
    rgbs[i] = {};
    var arr = [];

    for (var j = 0, c = 0, n = imgd.data.length; j < n; j += 4, c++) {
        if(j > 0 && j < d*4) {
         arr.push([imgd.data[j],imgd.data[j+1],imgd.data[j+2],imgd.data[+3]]);
        }
    }
    rgbs[i] = arr;
}

for(var k in rgbs) {
    for(var i=0; i<rgbs[k].length; i++) {
        if(rgbs[parseInt(k)+sq_size] !== undefined) {
            var gradient2 = ctx.createLinearGradient(0, parseInt(k)+(sq_size/2), 0, parseInt(k)+(sq_size/2) + sq_size);

            gradient2.addColorStop(0, 'rgba('+rgbs[k][i].join(',')+')');
            gradient2.addColorStop(1, 'rgba('+rgbs[parseInt(k)+sq_size][i].join(',')+')');
        
            ctx.fillStyle = gradient2;
            ctx.fillRect(i, parseInt(k)+(3*sq_size/4), 1, sq_size/2);
         
      }
   }
}