HTML5 Canvas没有显式设置单个像素的方法。
可以使用非常短的行设置像素，但反字符和行大写可能会干扰。
另一种方法可能是创建一个小的ImageData对象，并使用:
context.putImageData(data, x, y)
把它放在合适的位置。
有人能描述一种高效可靠的方法吗?
当前回答
一种没有提到的方法是使用getImageData，然后使用putImageData。 这种方法很适合当你想要画很多的时候，快速。 http://next.plnkr.co/edit/mfNyalsAR2MWkccr
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var pixels = id.data;
var x = Math.floor(Math.random() * canvasWidth);
var y = Math.floor(Math.random() * canvasHeight);
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var off = (y * id.width + x) * 4;
pixels[off] = r;
pixels[off + 1] = g;
pixels[off + 2] = b;
pixels[off + 3] = 255;
ctx.putImageData(id, 0, 0);
其他回答
如果你担心速度，那么你也可以考虑WebGL。
为了完成Phrogz非常彻底的回答，fillRect()和putImageData()之间有一个关键的区别。 第一个使用上下文通过添加一个矩形(不是像素)来绘制，使用fillStyle alpha值和上下文globalAlpha和转换矩阵，行大写等。 第二个替换整个像素集(可能是一个，但为什么?) 正如您在jsperf上看到的那样，结果是不同的。
没有人想一次只设置一个像素(也就是说在屏幕上绘制)。这就是为什么没有特定的API来做到这一点(这是正确的)。 在性能方面，如果目标是生成一张图片(例如光线跟踪软件)，你总是想使用一个由getImageData()获得的数组，这是一个优化的Uint8Array。然后使用setTimeout/seTInterval每秒调用putImageData()一次或几次。
像sdleihssirhc说的那样画一个矩形!
ctx.fillRect (10, 10, 1, 1);
^——应该在x:10, y:10处画一个1x1的矩形
有两个最好的竞争者:
创建一个1×1图像数据，设置颜色，putImageData在位置: var id = myContext.createImageData(1,1);//每页只做一次 Var d = id.data;//每页只做一次 D [0] = r; D [1] = g; D [2] = b; D [3] = a; myContext。putImageData(id, x, y); 使用fillRect()绘制一个像素(应该没有混叠问题): ctx。fillStyle = " rgba(“+ r +”、“+ g +”、“+ b + +(一个/ 255)+)”; ctx。fillRect(x, y, 1,1);
你可以在这里测试它们的速度:http://jsperf.com/setting-canvas-pixel/9或https://www.measurethat.net/Benchmarks/Show/1664/1
我建议针对您关心的浏览器进行测试，以获得最大速度。截至2017年7月，fillRect()在Firefox v54和Chrome v59 (Win7x64)上快了5-6倍。
其他更愚蠢的选择有:
using getImageData()/putImageData() on the entire canvas; this is about 100× slower than other options. creating a custom image using a data url and using drawImage() to show it: var img = new Image; img.src = "data:image/png;base64," + myPNGEncoder(r,g,b,a); // Writing the PNGEncoder is left as an exercise for the reader creating another img or canvas filled with all the pixels you want and use drawImage() to blit just the pixel you want across. This would probably be very fast, but has the limitation that you need to pre-calculate the pixels you need.
注意，我的测试没有尝试保存和恢复画布上下文fillStyle;这将降低fillRect()的性能。还要注意，我并没有从头开始，也没有为每个测试测试完全相同的像素集。
快速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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗，比如半空格的 , em-spaces, en-spaces等等?
