在 HTML5 Canvas 上绘制 1 像素线的完整解决方案

2022-01-17 00:00:00 line javascript html5-canvas

在 HTML5 画布上画 1 像素线总是有问题的.(参考 http://jsbin.com/voqubexu/1/edit?js,输出)

Draw 1 pixel line on HTML5 canvas is always problematic.(Refer to http://jsbin.com/voqubexu/1/edit?js,output)

绘制垂直/水平线的方法是x+0.5,y+0.5(参考0 ctx.translate(0.5, 0.5); 将是一个好主意.

The approach to draw a vertical/horizontal line is x+0.5, y+0.5 ( Refer to Canvas line behaviour when 0 < lineWidth < 1). To do this globally, ctx.translate(0.5, 0.5); would be a good idea.

但是，当涉及到对角线时，这种方法不起作用.它总是给出一个 2 像素的线.有没有办法阻止这种浏览器行为?如果没有，是否有可以解决此问题的软件包?

However, when it comes to diagonal lines, this method does not work. It always give a 2 pixel line. Is there a way to stop this browser behavior? If not, is there a package that can provide a solution to this problem?

推荐答案

您所指的更宽"行是由浏览器自动完成的抗锯齿结果.

The "wider" line you refer to results from anti-aliasing that's automatically done by the browser.

抗锯齿用于显示视觉上不那么锯齿状的线条.

Anti-aliasing is used to display a visually less jagged line.

没有逐个像素地绘制，目前无法禁用浏览器绘制的抗锯齿.

Short of drawing pixel-by-pixel, there's currently no way of disabling anti-aliasing drawn by the browser.

您可以使用 Bresenham 的线条算法通过设置单个像素来绘制线条.当然，设置单个像素会导致性能下降.

You can use Bresenham's line algorithm to draw your line by setting individual pixels. Of course, setting individual pixels results in lesser performance.

这是示例代码和演示:http://jsfiddle.net/m1erickson/3j7hpng0/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=imgData.data;

    bline(50,50,250,250);
    ctx.putImageData(imgData,0,0);

    function setPixel(x,y){
        var n=(y*canvas.width+x)*4;
        data[n]=255;
        data[n+1]=0;
        data[n+2]=0;
        data[n+3]=255;
    }

    // Refer to: http://rosettacode.org/wiki/Bitmap/Bresenham's_line_algorithm#JavaScript
    function bline(x0, y0, x1, y1) {
      var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
      var dy = Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1; 
      var err = (dx>dy ? dx : -dy)/2;        
      while (true) {
        setPixel(x0,y0);
        if (x0 === x1 && y0 === y1) break;
        var e2 = err;
        if (e2 > -dx) { err -= dy; x0 += sx; }
        if (e2 < dy) { err += dx; y0 += sy; }
      }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

相关文章