使用context.moveTo()
和context.lineTo()
函数在HTML5画布上绘制一条线非常简单。
我不太确定是否有可能画一个点,也就是给一个像素上色。lineTo函数不会绘制一条像素线(很明显)。
有什么方法可以做到这一点吗?
发布于 2011-10-19 04:29:04
出于性能原因,如果可以避免,请不要画圆圈。只需绘制一个宽度和高度均为1的矩形:
ctx.fillRect(10,10,1,1); // fill in the pixel at (10,10)
发布于 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/
发布于 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();
}
小偏移量在屏幕上不可见,但会强制渲染引擎实际绘制一个点。
https://stackoverflow.com/questions/7812514
复制相似问题