javascript 创建具有不同颜色比例的双色画布

Blindman67 2020-02-01 19:18

洗牌到位

一些答案建议使用费舍尔·耶茨（Fisher Yates）算法创建像素的随机分布，这是迄今为止获得一组固定值（在这种情况下为像素）的随机且均匀分布的最佳方法

但是，这两个答案都产生了非常差的实现，它们会重复像素（使用比所需数量更多的RAM，从而导致额外的CPU周期），并且都处理每个通道的像素，而不是谨慎处理（花费更多的CPU周期）

使用从中获取的图像数据ctx.getImageData来保持阵列的随机播放。它还提供了一种从CSS颜色值转换为像素数据的便捷方法。

随机播放现有图像

以下随机播放功能将混合所有保留所有颜色的画布。使用32位类型的数组，您可以一次操作移动整个像素。

function shuffleCanvas(ctx) {
    const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
    const p32 = new Uint32Array(imgData.data.buffer); // get 32 bit pixel data
    var i = p32.length, idx;
    while (i--) {
        const b = p32[i];
        p32[i] = p32[idx = Math.random() * (i + 1) | 0];
        p32[idx] = b;
    }
    ctx.putImageData(imgData, 0, 0); // put shuffled pixels back to canvas
}

演示版

该演示添加了一些功能。该函数fillRatioAndShffle为每种颜色在画布上绘制1个像素，然后使用像素数据作为Uint32来设置颜色比率，并使用标准的混洗算法（Fisher Yates）对像素数组进行混洗

使用滑块更改色彩比例。

const ctx = canvas.getContext("2d");
var currentRatio;
fillRatioAndShffle(ctx, "black", "red", 0.4);

ratioSlide.addEventListener("input", () => {
    const ratio = ratioSlide.value / 100;
    if (ratio !== currentRatio) { fillRatioAndShffle(ctx, "black", "red", ratio) }
});    

function fillRatioAndShffle(ctx, colA, colB, ratio) {
    currentRatio = ratio;
    ctx.fillStyle = colA;
    ctx.fillRect(0, 0, 1, 1);
    ctx.fillStyle = colB;
    ctx.fillRect(1, 0, 1, 1);

    const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
    const p32 = new Uint32Array(imgData.data.buffer); // get 32 bit pixel data
    const pA = p32[0], pB = p32[1]; // get colors 
    const pixelsA = p32.length * ratio | 0;
    p32.fill(pA, 0, pixelsA);
    p32.fill(pB, pixelsA);
    !(ratio === 0 || ratio === 1) && shuffle(p32);  
    ctx.putImageData(imgData, 0, 0); 
}

function shuffle(p32) {
    var i = p32.length, idx, t;
    while (i--) {
        t = p32[i];
        p32[i] = p32[idx = Math.random() * (i + 1) | 0];
        p32[idx] = t;
    }
}

<canvas id="canvas" width="128" height="128"></canvas>
<input id="ratioSlide" type="range" min="0" max="100" value="40" />

三元`?`而不是`if`

没有人会注意到这种混合是有点过度还是有点不足。更好的方法是按几率混合（如果随机值低于固定几率）。

对于两个值，三元是最优雅的解决方案

pixel32[i] = Math.random() < 0.4 ? 0xFF0000FF : 0xFFFF0000;

在下一个代码片段中，请参阅Alnitak 最佳答案或相同方法的替代演示变体。

const ctx = canvas.getContext("2d");
var currentRatio;
const cA = 0xFF000000, cB = 0xFF00FFFF; // black and yellow
fillRatioAndShffle(ctx, cA, cB, 0.4);

ratioSlide.addEventListener("input", () => {
    const ratio = ratioSlide.value / 100;
    if (ratio !== currentRatio) { fillRatioAndShffle(ctx, cA, cB, ratio) }
    currentRatio = ratio;
});    

function fillRatioAndShffle(ctx, cA, cB, ratio) {
    const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
    const p32 = new Uint32Array(imgData.data.buffer); // get 32 bit pixel data
    var i = p32.length;
    while (i--) { p32[i] = Math.random() < ratio ? cA : cB }
    ctx.putImageData(imgData, 0, 0); 
}

<canvas id="canvas" width="128" height="128"></canvas>
<input id="ratioSlide" type="range" min="0" max="100" value="40" />

javascript - 创建具有不同颜色比例的双色画布

洗牌到位

随机播放现有图像

演示版

三元`?`而不是`if`

热门帖子

相关问题

热门github

javascript - 创建具有不同颜色比例的双色画布

洗牌到位

随机播放现有图像

演示版

三元?而不是if

热门帖子

相关问题

热门github

三元`?`而不是`if`