Question

在这个jsfiddle中，有一行lineWidth为1。

例如：

ctx.lineWidth = 1;

然而，当它在画布上绘制时，线条厚度为2px，如何创建1px粗线。

我可以绘制一个矩形（高度为1px）但是我希望这条线也适用于对角线。那么你如何让这条线高1px？

谢谢！

Answer 1

Canvas从像素的一半计算

ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

所以从半开始就会解决它

修正版：http://jsfiddle.net/9bMPD/357/

This answer解释了为什么它会这样运作。

Answer 2

您还可以在X和Y方向上翻译半个像素，然后使用整个值作为坐标（在某些情况下可能需要将它们舍入）：

context.translate(0.5, 0.5)

context.moveTo(5,5);
context.lineTo(55,5);

请注意，如果您调整画布大小，则会重置翻译 - 因此您将再次翻译。

This answer解释了为什么它会这样运作。

Answer 3

或者作为this回答状态，要获得宽度1，您需要从半个像素开始。

ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);

http://jsfiddle.net/9bMPD/355/

Answer 4

你看到了first hit on google吗？（搜索canvas line width 1px）。虽然我不得不承认这不是“干净”或“精益”。 Ferry Kobus'解决方案要好得多。然后再说：首先你需要使用“半像素”...

Answer 5

Canvas可以使用fillRect（）绘制干净的直线。高度为1px或宽度为1px的矩形可以完成这项工作。它不需要半像素值：

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

ctx.drawVerticalLine = function(left, top, width, color){
    this.fillStyle=color;
    this.fillRect(left, top, 1, width);
};

ctx.drawHorizontalLine = function(left, top, width, color){
    this.fillStyle=color;
    this.fillRect(left, top, width, 1);
}

ctx.drawVerticalLine(150, 0, 300, "green");
ctx.drawHorizontalLine(0, 150, 300, "red");

https://jsfiddle.net/ynur1rab/

Answer 6

fillRect（）方法可用于在画布中绘制细水平或垂直线（无需在坐标上应用+0.5移位）：

this.fillRect(left, top, 1, height);
this.fillRect(left, top, width, 1);

你可以通过用以下代码替换这些代码来使线条变得更薄：

this.fillRect(left, top, 0.7, height);
this.fillRect(left, top, width, 0.7);

线条会更薄（趋向于达到1像素宽），但它们的颜色会稍微减弱。

-> working example

需要注意的是，如果我们设置ctx.lineWidth = 0.7（对于经典的beginPath / moveTo / lineTo / stroke序列），它在Chrome上不起作用（0.7和1的解释方式相同）。因此对此fillRect（）方法感兴趣。

Answer 7

如果这些答案都不适合您，请检查您的浏览器缩放。我的某种程度是125％，因此每第四个1px线被绘制为2px宽。

我花了好几个小时试图弄清楚为什么互联网上的每个小提琴都工作，我的没有（缩放只是为我的开发标签设置）

Answer 8

对我来说，只有不同的“像素完美”技术的组合才能帮助存档结果：

以像素比例获取和缩放画布：

pixelRatio = window.devicePixelRatio / ctx.backingStorePixelRatio
在调整大小时缩放画布（避免画布默认拉伸缩放）。
将lineWidth与pixelRatio乘以找到合适的“真实”像素线粗度：

context.lineWidth =厚度* pixelRatio;
检查线条的粗细是否为奇数或偶数。将奇数厚度值的一半pixelRatio添加到行位置。

x = x + pixelRatio / 2;

奇数行将放置在像素的中间。上面的线用于将其移动一点。

docker stop

function getPixelRatio(context) {
  dpr = window.devicePixelRatio || 1,
    bsr = context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    context.msBackingStorePixelRatio ||
    context.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;

  return dpr / bsr;
}


var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var pixelRatio = getPixelRatio(context);
var initialWidth = canvas.clientWidth * pixelRatio;
var initialHeight = canvas.clientHeight * pixelRatio;


window.addEventListener('resize', function(args) {
  rescale();
  redraw();
}, false);

function rescale() {
  var width = initialWidth * pixelRatio;
  var height = initialHeight * pixelRatio;
  if (width != context.canvas.width)
    context.canvas.width = width;
  if (height != context.canvas.height)
    context.canvas.height = height;

  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
}

function pixelPerfectLine(x) {

  context.save();
  context.beginPath();
  thickness = 1;
  // Multiple your stroke thickness  by a pixel ratio!
  context.lineWidth = thickness * pixelRatio;

  context.strokeStyle = "Black";
  context.moveTo(getSharpPixel(thickness, x), getSharpPixel(thickness, 0));
  context.lineTo(getSharpPixel(thickness, x), getSharpPixel(thickness, 200));
  context.stroke();
  context.restore();
}

function pixelPerfectRectangle(x, y, w, h, thickness, useDash) {
  context.save();
  // Pixel perfect rectange:
  context.beginPath();

  // Multiple your stroke thickness by a pixel ratio!
  context.lineWidth = thickness * pixelRatio;
  context.strokeStyle = "Red";
  if (useDash) {
    context.setLineDash([4]);
  }
  // use sharp x,y and integer w,h!
  context.strokeRect(
    getSharpPixel(thickness, x),
    getSharpPixel(thickness, y),
    Math.floor(w),
    Math.floor(h));
  context.restore();
}

function redraw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  pixelPerfectLine(50);
  pixelPerfectLine(120);
  pixelPerfectLine(122);
  pixelPerfectLine(130);
  pixelPerfectLine(132);
  pixelPerfectRectangle();
  pixelPerfectRectangle(10, 11, 200.3, 443.2, 1, false);
  pixelPerfectRectangle(41, 42, 150.3, 443.2, 1, true);
  pixelPerfectRectangle(102, 100, 150.3, 243.2, 2, true);
}

function getSharpPixel(thickness, pos) {

  if (thickness % 2 == 0) {
    return pos;
  }
  return pos + pixelRatio / 2;

}

rescale();
redraw();

canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100vh;
  height: 100vh;
}

未在摘要中触发调整大小事件，因此您可以尝试在github上尝试文件

在画布上绘制1px粗线可创建2px粗线

8 个答案: