3

当社のウェブサイトには、Flashに組み込まれた「ランダムシャードジェネレーター」があり、サイトヘッダーのすぐ下に多数の重複する色付きシャードグラフィックをランダムに作成します。

http://www.clarendonmarketing.com

HTML5を使用してこの効果を再現しようとしています。ランダムなシャードを簡単に生成できますが、ブレンドされたオーバーラップ（Adobeの用語で乗算）は課題です。

基本的に、各シャードが描画される前にすべてのキャンバスのピクセルデータの配列を作成し、次に各シャードが描画された後にキャンバスのピクセルデータを含む別の配列を作成するソリューションがあります。次に、2つを比較し、最初の配列で透明でないピクセルを見つけ、2番目の配列の対応するピクセルが現在選択されている塗りつぶしの色と一致する場合、「乗算」関数（topValue * bottomValue）によって決定される新しい色の値で再描画します。 / 255）。

一般に、これは正常に機能し、ギザギザの効果が生成される重なり合うシャードのエッジの周りを除いて、目的の効果を実現します。

これは、ブラウザのアンチエイリアシングと関係があると思います。計算されたピクセルの元のピクセルのアルファチャネル値を複製しようとしましたが、それは役に立たないようです。

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();

編集：本当に乗算が必要な場合は、専門家に任せてください。アルファ値を使用した乗算モードは少し注意が必要です。

デモ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 に答える