帆布圖形上的圖像數據不透明度

在以下示例中，我已將每個圖像像素的不透明度設置爲零。爲什麼灰色背景矩形不可見，我該如何實現？我是否在形狀與圖像數據的渲染過程中遺漏了一些東西？帆布圖形上的圖像數據不透明度

<!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中設置爲透明，那麼在放置它之後它將在上下文中。

爲了避免這種情況，你可以使用一個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; 
 
    }) 
 
createImageBitmap(iData).then(img => ctx.drawImage(img, 0,0));

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

，或者使用屏幕外的畫布：

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

回答

相關問題