HTML5 Canvas没有显式设置单个像素的方法。
可以使用非常短的行设置像素，但反字符和行大写可能会干扰。
另一种方法可能是创建一个小的ImageData对象，并使用:
context.putImageData(data, x, y)
把它放在合适的位置。
有人能描述一种高效可靠的方法吗?
当前回答
为了完成Phrogz非常彻底的回答，fillRect()和putImageData()之间有一个关键的区别。 第一个使用上下文通过添加一个矩形(不是像素)来绘制，使用fillStyle alpha值和上下文globalAlpha和转换矩阵，行大写等。 第二个替换整个像素集(可能是一个，但为什么?) 正如您在jsperf上看到的那样，结果是不同的。
没有人想一次只设置一个像素(也就是说在屏幕上绘制)。这就是为什么没有特定的API来做到这一点(这是正确的)。 在性能方面，如果目标是生成一张图片(例如光线跟踪软件)，你总是想使用一个由getImageData()获得的数组，这是一个优化的Uint8Array。然后使用setTimeout/seTInterval每秒调用putImageData()一次或几次。
其他回答
长方形呢?这比创建ImageData对象更有效。
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;
}
如果你担心速度，那么你也可以考虑WebGL。
纯粹出于诊断目的，我使用这个简单的函数。
请注意。如果不使用整数坐标，得到的图像是模糊的。
setPixel (context, 100, 100, 'blue');
function setPixel (ctx, x, y, c) {
// integer coordinates are required.
ctx.save ();
ctx.fillStyle = c;
ctx.fillRect (x, y, 1, 1);
ctx.restore ();
}
快速HTML演示代码: 基于我对SFML c++图形库的了解:
将其保存为UTF-8编码的HTML文件并运行。 可以随意重构，我只是喜欢用日文变量，因为 它们简洁明了，不占太多空间
你很少会想要设置一个任意像素和显示 它在屏幕上。所以使用
PutPix(x,y, r,g,b,a)
方法将大量任意像素绘制到后缓冲区。(便宜的调用)
当准备好展示的时候，打电话给
Apply()
方法显示更改。(昂贵的)
完整的。html文件代码如下:
<!DOCTYPE HTML >
<html lang="en">
<head>
<title> back-buffer demo </title>
</head>
<body>
</body>
<script>
//Main function to execute once
//all script is loaded:
function main(){
//Create a canvas:
var canvas;
canvas = attachCanvasToDom();
//Do the pixel setting test:
var test_type = FAST_TEST;
backBufferTest(canvas, test_type);
}
//Constants:
var SLOW_TEST = 1;
var FAST_TEST = 2;
function attachCanvasToDom(){
//Canvas Creation:
//cccccccccccccccccccccccccccccccccccccccccc//
//Create Canvas and append to body:
var can = document.createElement('canvas');
document.body.appendChild(can);
//Make canvas non-zero in size,
//so we can see it:
can.width = 800;
can.height= 600;
//Get the context, fill canvas to get visual:
var ctx = can.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(0,0,can.width-1, can.height-1);
//cccccccccccccccccccccccccccccccccccccccccc//
//Return the canvas that was created:
return can;
}
//THIS OBJECT IS SLOOOOOWW!
// 筆 == "pen"
//T筆 == "Type:Pen"
function T筆(canvas){
//Publicly Exposed Functions
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
this.PutPix = _putPix;
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
if(!canvas){
throw("[NilCanvasGivenToPenConstruct]");
}
var _ctx = canvas.getContext("2d");
//Pixel Setting Test:
// only do this once per page
//絵 =="image"
//資 =="data"
//絵資=="image data"
//筆 =="pen"
var _絵資 = _ctx.createImageData(1,1);
// only do this once per page
var _筆 = _絵資.data;
function _putPix(x,y, r,g,b,a){
_筆[0] = r;
_筆[1] = g;
_筆[2] = b;
_筆[3] = a;
_ctx.putImageData( _絵資, x, y );
}
}
//Back-buffer object, for fast pixel setting:
//尻 =="butt,rear" using to mean "back-buffer"
//T尻=="type: back-buffer"
function T尻(canvas){
//Publicly Exposed Functions
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
this.PutPix = _putPix;
this.Apply = _apply;
//PEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPEPE//
if(!canvas){
throw("[NilCanvasGivenToPenConstruct]");
}
var _can = canvas;
var _ctx = canvas.getContext("2d");
//Pixel Setting Test:
// only do this once per page
//絵 =="image"
//資 =="data"
//絵資=="image data"
//筆 =="pen"
var _w = _can.width;
var _h = _can.height;
var _絵資 = _ctx.createImageData(_w,_h);
// only do this once per page
var _筆 = _絵資.data;
function _putPix(x,y, r,g,b,a){
//Convert XY to index:
var dex = ( (y*4) *_w) + (x*4);
_筆[dex+0] = r;
_筆[dex+1] = g;
_筆[dex+2] = b;
_筆[dex+3] = a;
}
function _apply(){
_ctx.putImageData( _絵資, 0,0 );
}
}
function backBufferTest(canvas_input, test_type){
var can = canvas_input; //shorthand var.
if(test_type==SLOW_TEST){
var t筆 = new T筆( can );
//Iterate over entire canvas,
//and set pixels:
var x0 = 0;
var x1 = can.width - 1;
var y0 = 0;
var y1 = can.height -1;
for(var x = x0; x <= x1; x++){
for(var y = y0; y <= y1; y++){
t筆.PutPix(
x,y,
x%256, y%256,(x+y)%256, 255
);
}}//next X/Y
}else
if(test_type==FAST_TEST){
var t尻 = new T尻( can );
//Iterate over entire canvas,
//and set pixels:
var x0 = 0;
var x1 = can.width - 1;
var y0 = 0;
var y1 = can.height -1;
for(var x = x0; x <= x1; x++){
for(var y = y0; y <= y1; y++){
t尻.PutPix(
x,y,
x%256, y%256,(x+y)%256, 255
);
}}//next X/Y
//When done setting arbitrary pixels,
//use the apply method to show them
//on screen:
t尻.Apply();
}
}
main();
</script>
</html>
