在html5画布中绘制单个像素线 [英] Draw single pixel line in html5 canvas

问题描述

当我尝试用下面的代码绘制单像素黑线：

  context.strokeStyle ='＃000'; 
 context.beginPath（）; 
 context.moveTo（x1，y1）; 
 context.lineTo（x2，y2）; 
 context.lineWidth = 1; 
 context.stroke（）; 
 context.closePath（）; 
  

我有一个以上的灰色边框的像素线。如何解决此问题？

以下是一个示例。

When i try to draw single pixel black line with the following code:

    context.strokeStyle = '#000'; 
    context.beginPath();
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();  

I have more then one pixel line with gray border. How to fix it?

Here is an example http://jsfiddle.net/z4VJq/

解决方案

Call your function with these coordinates instead: drawLine(30,30.5,300,30.5);. Try it in jsFiddle.

The problem is that your color will be at an edge, so the color will be halfway in the pixel above the edge and halfway below the edge. If you set the position of the line in the middle of an integer, it will be drawn within a pixel line.

This picture (from the linked article below) illustrates it:

You can read more about this on Canvas tutorial: A lineWidth example.

这篇关于在html5画布中绘制单个像素线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！