javascript - HTML Canvas - 形状之间的颜色过渡（形状不重叠）

Question

该图像是我期待使用 html canvas 实现的，而不使用 blur 或 shadow。

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

问题的小提琴是（基本绘图）here

var 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;
}

标签： javascripthtml5-canvas

Answer 1

在不实施模糊的情况下可以获得的最接近的值。

您可以使用图像平滑ctx.imageSmoothingEnabled来模糊分辨率非常低的图像。然后使用混合模糊和未模糊图像ctx.globalAlpha

例子

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

注意结果会因使用的设备和浏览器/版本而异。

requestAnimationFrame(animationLoop);
const size = canvas.width;
const ctx = canvas.getContext('2d');
var mix = 123; // amount to transition 
const transitionTime = 2; // seconds per transition
const swatches = [0,1,2];
const pixelSize = 2;
// eCurve p = 1 linear curve [default p = 2] is quadratic curve p = 3 cubic curve and so on.
const eCurve = (v, p = 2) =>  v < 0 ? 0 : v > 1 ? 1 : v ** p / (v ** p + (1 - v) ** p);
const 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("canvas");
img.height = img.width = swatches.length * pixelSize;
const imgCtx = img.getContext('2d');
function randomSwatch() {
    swatches.forEach(y => { swatches.forEach(x => {
          imgCtx.fillStyle = "rgb("+cols[Math.random() * cols.length | 0].join(",")+")";
          imgCtx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
     }); });
}
function animationLoop() {
     mix = (mix >= 4 ? (randomSwatch(), 0) : mix) + 1 / (transitionTime * 60);
     ctx.globalAlpha = 1;
     ctx.imageSmoothingEnabled = false;
     ctx.drawImage(img, 0, 0, size, size);
     ctx.imageSmoothingEnabled = true;
     const a = mix % 2;
     ctx.globalAlpha = eCurve(a > 1 ? 2 - a : a, 3);
     ctx.drawImage(img, 0, 0, size, size);
     requestAnimationFrame(animationLoop);
}

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