キャンバス画像のデータ不透明度がキャンバス形状の上に

次の例では、すべての画像ピクセルの不透明度をゼロに設定しました。グレーの背景矩形が表示されないのはなぜですか？形状と画像データのレンダリング処理で何か不足していますか？キャンバス画像のデータ不透明度がキャンバス形状の上に

<!DOCTYPE html> 
<meta charset="utf-8"> 

<script src="https://d3js.org/d3.v4.min.js"></script> 

<body> 
    <canvas id='myCanvas'></canvas> 
</body> 

<script type="text/javascript"> 

    var width = 500; 
    var height = 500; 

    var canvas = document.getElementById('myCanvas') 
    context = canvas.getContext("2d"), 

    canvas.width = width; 
    canvas.height = height; 

    context.fillStyle = "grey"; 
    context.fillRect(0,0,100,100); 

    var imageData = context.createImageData(width, height); 

    for (var i = 0, l = 0; i<height; ++i) { 
     for (j = 0; j<width; ++j, l += 4) { 
      imageData.data[l+0] = Math.round(Math.random() * 255); 
      imageData.data[l+1] = Math.round(Math.random() * 255); 
      imageData.data[l+2] = Math.round(Math.random() * 255); 
      imageData.data[l+3] = 0; 
     } 

    } 

    context.putImageData(imageData, 0, 0); 

</script>

出典

2017-09-02 spyrostheodoridis

putImageDataあなたはImageDataを渡されたものを使用してコンテキストにピクセルを設定します。

ImageDataで指定されたピクセルが透明に設定されている場合は、それを配置した後もコンテキスト上に表示されます。

これを避けるために、あなたは、あなたがイメージのようなあなたのコンテキストに描画できるようになりますことを、

const ctx = c.getContext('2d'); 
 
ctx.fillStyle = 'red'; 
 
ctx.fillRect(0,0,30,30); 
 
const iData = ctx.createImageData(300, 150); 
 
// make the noise mostly transparent 
 
iData.data.forEach((d,i,a)=>{ 
 
    a[i] = (i+1)%4 ? Math.random() * 255 : Math.random() * 125; 
 
    }) 
 
createImageBitmap(iData).then(img => ctx.drawImage(img, 0,0));

<canvas id="c"></canvas>

をImageBitmapオブジェクトを使用するか、オフスクリーンキャンバスを使用することができます：

const ctx = c.getContext('2d'); 
 
ctx.fillStyle = 'red'; 
 
ctx.fillRect(0,0,30,30); 
 
const iData = ctx.createImageData(300, 150); 
 
// make the noise mostly transparent 
 
iData.data.forEach((d,i,a)=>{ 
 
    a[i] = (i+1)%4 ? Math.random() * 255 : Math.random() * 125; 
 
    }) 
 

 
const offCtx = c.cloneNode().getContext('2d'); // an offscreen canvas 
 
offCtx.putImageData(iData, 0,0); 
 
ctx.drawImage(offCtx.canvas, 0,0);

<canvas id="c"></canvas>

出典

2017-09-02 08:38:39 Kaiido

すばらしい答え！どうもありがとう。 – spyrostheodoridis

キャンバス画像のデータ不透明度がキャンバス形状の上に

答えて

関連する問題