3

我们公司的网站有一个内置 Flash 的“随机碎片生成器”，它会在网站标题下方随机创建许多重叠的彩色碎片图形。

http://www.clarendonmarketing.com

我正在尝试使用 HTML5 复制这种效果，虽然我可以很容易地生成随机分片，但混合重叠（在 Adob​​e 术语中相乘）被证明是一个挑战。

我有一个解决方案，它基本上在绘制每个分片之前创建一个包含所有画布像素数据的数组，然后在绘制每个分片之后创建另一个包含画布像素数据的数组。然后它比较这两者，并在第一个数组中找到一个非透明像素，其第二个数组中的对应像素与当前选择的填充颜色匹配，它使用由“乘法”函数确定的新颜色值重绘它（topValue * bottomValue / 255)。

通常，这可以正常工作并达到所需的效果，除了在重叠碎片的边缘周围会产生锯齿状效果。

我相信这与浏览器的抗锯齿有关。我已经尝试为计算的像素复制原始像素的 alpha 通道值，但这似乎没有帮助。

Javascript：

// Random Shard Generator v2 (HTML5)

var theCanvas;
var ctx;

var maxShards = 6;
var minShards = 3;

var fillArray = new Array(
    [180,181,171,255], 
    [162,202,28,255], 
    [192,15,44,255], 
    [222,23,112,255], 
    [63,185,127,255], 
    [152,103,158,255], 
    [251,216,45,255], 
    [249,147,0,255], 
    [0,151,204,255]
);

var selectedFill;

window.onload = function() {

    theCanvas = document.getElementById('shards');
    ctx = theCanvas.getContext('2d');
    //ctx.translate(-0.5, -0.5)

    var totalShards = getRandom(maxShards, minShards);

    for(i=0; i<=totalShards; i++) {
        //get snapshot of current canvas
        imgData = ctx.getImageData(0,0,theCanvas.width,theCanvas.height);
        currentPix = imgData.data
        //draw a shard
        drawRandomShard();
        //get snapshot of new canvas
        imgData = ctx.getImageData(0,0,theCanvas.width,theCanvas.height);
        pix = imgData.data;
        //console.log(selectedFill[0]+','+selectedFill[1]+','+selectedFill[2]);
        //alert('break')

        //CALCULATE THE MULTIPLIED RGB VALUES FOR OVERLAPPING PIXELS

        for (var j = 0, n = currentPix.length; j < n; j += 4) {
            if (    
                //the current pixel is not blank (alpha 0)
                (currentPix[j+3]>0)
                    && //and the new pixel matches the currently selected fill colour
                (pix[j]==selectedFill[0] && pix[j+1]==selectedFill[1] && pix[j+2]==selectedFill[2])
            ) { //multiply the current pixel by the selected fill colour
                //console.log('old: '+currentPix[j]+','+currentPix[j+1]+','+currentPix[j+2]+','+currentPix[j+3]+'\n'+'new: '+pix[j]+','+pix[j+1]+','+pix[j+2]+','+pix[j+3]);
                pix[j] = multiply(selectedFill[0], currentPix[j]); // red
                pix[j+1] = multiply(selectedFill[1], currentPix[j+1]); // green
                pix[j+2] = multiply(selectedFill[2], currentPix[j+2]); // blue
            }
        }
        //update the canvas
        ctx.putImageData(imgData, 0, 0);        
    }


};

function drawRandomShard() {

    var maxShardWidth = 200;
    var minShardWidth = 30;
    var maxShardHeight = 16;
    var minShardHeight = 10;
    var minIndent = 4;
    var maxRight = theCanvas.width-maxShardWidth;
    //generate a random start point
    var randomLeftAnchor = getRandom(maxRight, 0);
    //generate a random right anchor point
    var randomRightAnchor = getRandom((randomLeftAnchor+maxShardWidth),(randomLeftAnchor+minShardWidth));
    //generate a random number between the min and max limits for the lower point
    var randomLowerAnchorX = getRandom((randomRightAnchor - minIndent),(randomLeftAnchor + minIndent));
    //generate a random height for the shard
    var randomLowerAnchorY = getRandom(maxShardHeight, minShardHeight);
    //select a fill colour from an array
    var fillSelector = getRandom(fillArray.length-1,0);
    //console.log(fillSelector);
    selectedFill = fillArray[fillSelector];

    drawShard(randomLeftAnchor, randomLowerAnchorX, randomLowerAnchorY, randomRightAnchor, selectedFill);

}

function drawShard(leftAnchor, lowerAnchorX, lowerAnchorY, rightAnchor, selectedFill) {

    ctx.beginPath();
    ctx.moveTo(leftAnchor,0);
    ctx.lineTo(lowerAnchorX,lowerAnchorY);
    ctx.lineTo(rightAnchor,0);
    ctx.closePath();
    fillColour = 'rgb('+selectedFill[0]+','+selectedFill[1]+','+selectedFill[2]+')';
    ctx.fillStyle=fillColour;
    ctx.fill();

};

function getRandom(high, low) {
    return Math.floor(Math.random() * (high-low)+1) + low;
}

function multiply(topValue, bottomValue){
    return topValue * bottomValue / 255;
};

工作演示： http ://www.clarendonmarketing.com/html5shards.html

4

1 回答 1

5

你真的需要乘法吗？为什么不只使用较低的不透明度混合？

演示http://jsfiddle.net/wk3eE/

ctx.globalAlpha = 0.6;
for(var i=totalShards;i--;) drawRandomShard();

编辑：如果你真的需要乘法，那就交给专业人员吧，因为带有 alpha 值的乘法模式有点棘手：

演示 2：http: //jsfiddle.net/wk3eE/2/

<script type="text/javascript" src="context_blender.js"></script>
<script type="text/javascript">
  var ctx = document.querySelector('canvas').getContext('2d');

  // Create an off-screen canvas to draw shards to first
  var off = ctx.canvas.cloneNode(true).getContext('2d');

  var w = ctx.canvas.width, h = ctx.canvas.height;
  for(var i=totalShards;i--;){
    off.clearRect(0,0,w,h);        // clear the offscreen context first
    drawRandomShard(off);          // modify to draw to the offscreen context
    off.blendOnto(ctx,'multiply'); // multiply onto the main context
  }
</script>
于 2012-05-24T15:50:16.613 回答