下面是我的 html 代码，它收到错误: “无法在‘CanvasRenderingContext2D’上执行‘putImageData’:参数 1 不是‘ImageData’类型。”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<canvas id="c"></canvas>
<script>
const data = new Uint8ClampedArray([255, 0, 0, 1]);
const ctx = document.querySelector("#c").getContext("2d");
ctx.putImageData(data, 0, 0);
</script>
</body>
</html>
最佳答案
您的代码中有 1 个主要问题，还有 1 个额外的小问题。
主要问题
.putImageData需要 ImageData作为它的第一个参数。相反，您给出了一个 Uint8ClampedArray。
要解决此问题，您需要使用 Uint8ClampedArray 创建一个 ImageData 实例:
data = new ImageData(new Uint8ClampedArray([255, 0, 0, 1]), /* other required params */);
额外问题
在您的 Uint8ClampedArray 中，您有一个数组 [255, 0, 0, 1]。该数据实际上转换为 rgba(255, 0, 0, 0.005)。换句话说，你的小红框将以 0.005 的 alpha 进行渲染，几乎是透明的。
要使其不透明，您需要将 Alpha 转换为 255 的比例。
例如，如果您想要一个 1x1 不透明的红色框，则需要将 [255, 0, 0, 255] 赋予 Uint8ClampedArray。
示例
请参阅下面的 2x2 半透明(alpha 为 0.5)红色框示例。
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const data = new Uint8ClampedArray([
255, 0, 0, 128,
255, 0, 0, 128,
255, 0, 0, 128,
255, 0, 0, 128
]);
const imageData = new ImageData(data, 2, 2);
ctx.putImageData(imageData, 0, 0);<canvas id="canvas"></canvas>关于javascript - 无法在 'putImageData' : parameter 1 is not of type 'CanvasRenderingContext2D' 上执行 'ImageData'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57587315/