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

Question

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

And*_*dyX 7 javascript line html5-canvas

在HTML5画布上绘制1像素线总是有问题的.(请参阅http://jsbin.com/voqubexu/1/edit?js,output)

绘制垂直/水平线的方法是x + 0.5,y + 0.5(当0 <lineWidth <1时,请参阅画布线行为).要在全球范围内做到这一点,ctx.translate(0.5, 0.5);这将是一个好主意.

但是,对于对角线,此方法不起作用.它总是给出2像素线.有没有办法阻止这种浏览器行为？如果没有,是否有可以解决此问题的软件包？

Answer 1

mar*_*rkE 6

您引用的"更宽"行是由浏览器自动完成的抗锯齿产生的.

抗锯齿用于显示视觉上较少锯齿的线条.

如果没有逐像素绘制,目前无法禁用浏览器绘制的抗锯齿.

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

这是示例代码和演示: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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，3 月前
查看次数：	2826 次
最近记录：	6 年，4 月前