test 发表于 2022-10-22 20:52:49

HTML5 canvas使用ImageData设置像素之后会有一部分透明的问题?

最近在学canvas,现在我创建一个离屏canvas并且设置imageData的像素,在调用context.drawImage()方法将离屏canvas绘制到屏幕中的时候设置的像素点会有一部分透明出现

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const dpr = window.devicePixelRatio;

const width = 200;
const height = 200;

canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
const context = canvas.getContext('2d')!;

const offCanvas = document.createElement('canvas');
const offContext = offCanvas.getContext('2d')!;

const imageData = offContext.getImageData(0, 0, offCanvas.width, offCanvas.height);
imageData.data = 0;
imageData.data = 0;
imageData.data = 0;
imageData.data = 255;

offContext.putImageData(imageData, 0, 0);

context.scale(20, 20);
context.drawImage(offCanvas, 0, 0);

一个实心的方块,但是现在有一部分透明了,请问如何解决

吊儿郎当 发表于 2022-10-23 13:11:28

关注, 学习一下
页: [1]
查看完整版本: HTML5 canvas使用ImageData设置像素之后会有一部分透明的问题?