gpt4 book ai didi

JavaScript 将图像数据放在 Canvas 上

转载 作者:太空宇宙 更新时间:2023-11-03 22:30:11 25 4
gpt4 key购买 nike

我有以下代码创建一个矩形,如下图所示:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p id='one'></p>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 40, 40)
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 16) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
// ctx.putImageData(imgData, 10, 10);

</script>
</body>
</html>

enter image description here



当我通过不注释 ctx.putImageData 确保添加了图像数据时,我只得到如下图所示的图像数据:

enter image description here



如何确保图像创建在黑色矩形的顶部,即在红线之间的空白区域?
我希望能够看到黑色矩形。我尝试更改 alpha channel 但没有做任何事情。

提前致谢:)。

最佳答案

putImageData 会将目标像素替换为您的 ImageData 中包含的像素,无论它们是什么。
这意味着如果您的 ImageData 包含透明像素,那么一旦您将 ImageData 放在 Canvas 上,这些透明像素就会存在。

虽然有几种方法可以完成您想要的。

需要较少代码更改的是从上下文的当前状态进行像素操作。调用getImageData您将拥有一个 ImageData,而不是 createImageData,其中包含您所选区域中当前绘制的像素。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 40, 40);
// get the current pixels at (x, y, width, height)
var imgData = ctx.getImageData(10, 10, 100, 100);
var i;
// and do the pixel manip over these pixels
for (i = 0; i < imgData.data.length; i += 16) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);
<canvas id="myCanvas"></canvas>

主要的警告是 getImageDatacreateImageData 更慢并且需要更多的内存,所以如果你要在动画中的每一帧都这样做,它可能不适合.

在这种情况下(动画)的另一种解决方案是使用第二个离屏 Canvas ,您将在其上绘制一次 ImageData,然后使用 drawImage< 在主 Canvas 上绘制这个离屏 Canvas .

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
var gridImage = generateGrid(100, 100);

var x = 0;
anim();

/*
Makes your pixel manip on an off-screen canvas
Returns the off-screen canvas
*/
function generateGrid(width, height){
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var off_ctx = canvas.getContext('2d');
var imgData = off_ctx.createImageData(width, height);
for (i = 0; i < imgData.data.length; i += 16) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
off_ctx.putImageData(imgData, 0,0);
return canvas;
}
function anim(){
ctx.clearRect(0,0,c.width, c.height);
x = (x + 1) % (c.width + 100);
ctx.fillRect(x, 20, 40, 40);
// and here you draw your generated canvas
ctx.drawImage(gridImage, x - 10, 0);
requestAnimationFrame(anim);
}
<canvas id="myCanvas"></canvas>

您还可以重构您的代码,以便正常绘图(这里是 fillRect)您确实绘制了 ImageData,但是 < strong>背后 当前图纸,感谢 globalCompositeOperation您上下文的属性:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// do first your pixel manip
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 16) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

// change the gCO to draw behind current non-transparent pixels
ctx.globalCompositeOperation = 'destination-over';
// now make your normal drawings
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 40, 40);
// reset the gCO
ctx.globalCompositeOperation = 'source-over';
<canvas id="myCanvas"></canvas>

最后,如果您只定位 next-gen browsers , 那么你可以使用 ImageBitmap object ,这将产生与屏幕外 Canvas 相同的结果,代码行更少:

(async () => {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'black';
var gridImage = await generateGrid(100, 100);
var x = 0;
anim();

/*
Makes your pixel manip on an empty ImageData
Returns an Promise resolving to an ImageBitmap
*/
function generateGrid(width, height) {
var imgData = ctx.createImageData(width, height);
for (i = 0; i < imgData.data.length; i += 16) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
return createImageBitmap(imgData);
}

function anim() {
ctx.clearRect(0, 0, c.width, c.height);
x = (x + 1) % (c.width + 100);
ctx.fillRect(x, 20, 40, 40);
// and here you draw your generated canvas
ctx.drawImage(gridImage, x - 10, 0);
requestAnimationFrame(anim);
}
})();
<canvas id="myCanvas"></canvas>

关于JavaScript 将图像数据放在 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48858220/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com