在HTML5画布上绘制1像素线的完整解决方案 [英] Complete Solution for Drawing 1 Pixel Line on 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 href =http://stackoverflow.com/questions/24669578/canvas-line-behaviour-when-0-linewidth-1> 0< lineWidth< 1 时的画布线行为）。
要在全球范围内这样做， 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/
Here's example code and a Demo: 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>
这篇关于在HTML5画布上绘制1像素线的完整解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
