HTML5 Canvas没有显式设置单个像素的方法。
可以使用非常短的行设置像素,但反字符和行大写可能会干扰。
另一种方法可能是创建一个小的ImageData对象,并使用:
context.putImageData(data, x, y)
把它放在合适的位置。
有人能描述一种高效可靠的方法吗?
HTML5 Canvas没有显式设置单个像素的方法。
可以使用非常短的行设置像素,但反字符和行大写可能会干扰。
另一种方法可能是创建一个小的ImageData对象,并使用:
context.putImageData(data, x, y)
把它放在合适的位置。
有人能描述一种高效可靠的方法吗?
当前回答
快捷方便
下面的类实现了本文中描述的快速方法,并包含了所有您需要的:readPixel, putPixel,获取宽度/高度。类在调用refresh()方法后更新画布。算例求解二维波动方程的简单情形
class Screen{ constructor(canvasSelector) { this.canvas = document.querySelector(canvasSelector); this.width = this.canvas.width; this.height = this.canvas.height; this.ctx = this.canvas.getContext('2d'); this.imageData = this.ctx.getImageData(0, 0, this.width, this.height); this.buf = new ArrayBuffer(this.imageData.data.length); this.buf8 = new Uint8ClampedArray(this.buf); this.data = new Uint32Array(this.buf); } // r,g,b,a - red, gren, blue, alpha components in range 0-255 putPixel(x,y,r,g,b,a=255) { this.data[y * this.width + x] = (a<<24) | (b<<16) | (g<<8) | r; } readPixel(x,y) { let p= this.data[y * this.width + x] return [p&0xff, p>>8&0xff, p>>16&0xff, p>>>24]; } refresh() { this.imageData.data.set(this.buf8); this.ctx.putImageData(this.imageData, 0, 0); } } // -------- // TEST // -------- let s= new Screen('#canvas'); // initialise function draw() { for (var y = 1; y < s.height-1; ++y) { for (var x = 1; x < s.width-1; ++x) { let a = [[1,0],[-1,0],[0,1],[0,-1]].reduce((a,[xp,yp])=> a+= s.readPixel(x+xp,y+yp)[0] // read pixel ,0); let v= a/1.99446-tmp[x][y]; tmp[x][y]=v<0 ? 0:v; } } for (var y = 1; y < s.height-1; ++y) { for (var x = 1; x < s.width-1; ++x) { let v=tmp[x][y]; tmp[x][y]= s.readPixel(x,y)[0]; // read pixel s.putPixel(x,y, v,0,0); // put pixel } } s.refresh(); window.requestAnimationFrame(draw) } // temporary 2d buffer ()for solving wave equation) let tmp = [...Array(s.width)].map(x => Array(s.height).fill(0)); function move(e) { s.putPixel(e.x-10, e.y-10, 255,255,255);} draw(); <canvas id="canvas" height="150" width="512" onmousemove="move(event)"></canvas> <div>Move mouse on black square</div>
其他回答
像sdleihssirhc说的那样画一个矩形!
ctx.fillRect (10, 10, 1, 1);
^——应该在x:10, y:10处画一个1x1的矩形
function setPixel(imageData, x, y, r, g, b, a) {
var index = 4 * (x + y * imageData.width);
imageData.data[index+0] = r;
imageData.data[index+1] = g;
imageData.data[index+2] = b;
imageData.data[index+3] = a;
}
为了完成Phrogz非常彻底的回答,fillRect()和putImageData()之间有一个关键的区别。 第一个使用上下文通过添加一个矩形(不是像素)来绘制,使用fillStyle alpha值和上下文globalAlpha和转换矩阵,行大写等。 第二个替换整个像素集(可能是一个,但为什么?) 正如您在jsperf上看到的那样,结果是不同的。
没有人想一次只设置一个像素(也就是说在屏幕上绘制)。这就是为什么没有特定的API来做到这一点(这是正确的)。 在性能方面,如果目标是生成一张图片(例如光线跟踪软件),你总是想使用一个由getImageData()获得的数组,这是一个优化的Uint8Array。然后使用setTimeout/seTInterval每秒调用putImageData()一次或几次。
嗯,你也可以只做一个1像素宽的线,长度为1像素,让它的方向沿着一个轴移动。
ctx.beginPath();
ctx.lineWidth = 1; // one pixel wide
ctx.strokeStyle = rgba(...);
ctx.moveTo(50,25); // positioned at 50,25
ctx.lineTo(51,25); // one pixel long
ctx.stroke();
如果你担心速度,那么你也可以考虑WebGL。