在HTML5画布上绘制点
在HTML5画布上绘制点
提问于 2011-10-19 03:24:10
使用context.moveTo()和context.lineTo()函数在HTML5画布上绘制一条线非常简单。
我不太确定是否有可能画一个点，也就是给一个像素上色。lineTo函数不会绘制一条像素线(很明显)。
有什么方法可以做到这一点吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-10-19 04:29:04
出于性能原因，如果可以避免，请不要画圆圈。只需绘制一个宽度和高度均为1的矩形：
ctx.fillRect(10,10,1,1); // fill in the pixel at (10,10)Stack Overflow用户
发布于 2011-11-28 09:53:36
如果您计划绘制大量像素，使用画布的图像数据进行像素绘制效率更高。
var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
// That's how you define the value of a pixel
function drawPixel (x, y, r, g, b, a) {
var index = (x + y * canvasWidth) * 4;
canvasData.data[index + 0] = r;
canvasData.data[index + 1] = g;
canvasData.data[index + 2] = b;
canvasData.data[index + 3] = a;
}
// That's how you update the canvas, so that your
// modification are taken in consideration
function updateCanvas() {
ctx.putImageData(canvasData, 0, 0);
}然后，您可以这样使用它：
drawPixel(1, 1, 255, 0, 0, 255);
drawPixel(1, 2, 255, 0, 0, 255);
drawPixel(1, 3, 255, 0, 0, 255);
updateCanvas();有关更多信息，您可以查看Mozilla博客文章：http://hacks.mozilla.org/2009/06/pushing-pixels-with-canvas/
Stack Overflow用户
发布于 2014-03-19 16:53:11
在我的Firefox中，这个技巧起作用了：
function SetPixel(canvas, x, y)
{
canvas.beginPath();
canvas.moveTo(x, y);
canvas.lineTo(x+0.4, y+0.4);
canvas.stroke();
}小偏移量在屏幕上不可见，但会强制渲染引擎实际绘制一个点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7812514
复制相关文章
相似问题