putImageData 的 canvas 行为真的很奇怪

Question

我正在努力利用 HTML canvas 使用 putImageData。

这是我的代码： https://jsfiddle.net/173mbg0n/58/

HTML:

<canvas id='c'></canvas>

CSS:

canvas {
  width: 100px;
  height: 100px;
  background: red;
}

JavaScript:

let W = 100;
let H = 100;

let c = document.getElementById('c');
var ctx = c.getContext("2d");

let array = new Uint32Array(W * H);
for (let i = 0; i < array.length; i++)
   array[i] = 0xff00ffff;

let ca = new Uint8ClampedArray(array.buffer);
let img = new ImageData(ca, W);

ctx.putImageData(img, 0, 0);

这是我的结果： https://i.stack.imgur.com/bzUxV.png

我希望所有 canvas 都是黄色的。

我做错了什么？

Answer 1

您必须为 <canvas> 元素提供 height 和 width 属性：

<canvas id='c' height=100 width=100></canvas>

有了这个改变，它就起作用了。 canvas 的 CSS 大小决定了 canvas 的外观，而元素的属性决定了它的几何图形以供绘图。

putImageData 的 canvas 行为真的很奇怪

Really weird canvas behavior with putImageData

javascript

canvas

html5-canvas