blocks|key|89021|text|你看到first+hit+on+google了吗？(搜索canvas+line+width+1px)。尽管我必须承认这并不完全是“干净”或“倾斜”的。Ferry+Kobus'解决方案要好得多。然后再说一遍:首先你需要使用“半个像素”，这很糟糕……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|89022|entityMap|0|LINK|mutability|MUTABLE|url|http://code.anjanesh.net/2009/05/1-pixel-wide-line-parallel-to-axis-in.html|1|https://stackoverflow.com/a/13879402/215042^0|S|L|3|J|0|23|C|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]|$9|V|A|W|1|X]]|E|$]]|$1|F|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]]]

Did you see the <a href="http://code.anjanesh.net/2009/05/1-pixel-wide-line-parallel-to-axis-in.html" rel="nofollow noreferrer">first hit on google</a>? (search for <code>canvas line width 1px</code>).
Though I have to admit this isn't exactly "clean" or "lean". <a href="https://stackoverflow.com/a/13879402/215042">Ferry Kobus'</a> solution is much better. Then again: it sucks you need to use "half pixels" in the first place...

blocks|key|3998849|text|Canvas从半个像素开始计算|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3998850|ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);|code-block|syntax|javascript|3998851|所以从一半开始就能解决这个问题|3998852|固定版本：http://jsfiddle.net/9bMPD/357/|offset|length|3998853|This+answer解释了为什么它是这样工作的。|3998854|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9bMPD/357/|1|https://stackoverflow.com/a/7531540/719276^0|0|0|0|5|U|0|0|0|B|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

Canvas calculates from the half of a pixel

<pre><code>ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);
</code></pre>

So starting at a half will fix it

Fixed version: <a href="http://jsfiddle.net/9bMPD/357/" rel="noreferrer">http://jsfiddle.net/9bMPD/357/</a>

<a href="https://stackoverflow.com/a/7531540/719276">This answer</a> explains why it works that way.

blocks|key|88749|text|或者，正如this回答所述，要获得1的宽度，您需要从半个像素开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|88750|ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);|code-block|syntax|javascript|88751|http://jsfiddle.net/9bMPD/355/|88752|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width|1^0|5|4|0|0|0|0|U|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|J]]]]

Or as <a href="https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width">this</a> answer states, to get a width of 1, you need to start at a half pixel.

<pre><code>ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);
</code></pre>

<a href="http://jsfiddle.net/9bMPD/355/" rel="nofollow noreferrer">http://jsfiddle.net/9bMPD/355/</a>

blocks|key|649513|text|还可以在X和Y方向上平移半个像素，然后使用整数值作为坐标(在某些情况下，可能需要对它们进行舍入)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649514|context.translate(0.5,+0.5)

context.moveTo(5,5);
context.lineTo(55,5);|code-block|syntax|javascript|649515|请记住，如果您调整画布的大小，翻译将被重置-因此您将不得不再次翻译。|649516|您可以在此处了解translate函数及其使用方法：|649517|https://www.rgraph.net/canvas/reference/translate.html|offset|length|649518|This+answer解释了为什么它是这样工作的。|649519|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/a/7531540/719276^0|0|0|0|0|0|1I|0|0|0|B|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|13|8|@]|9|@$M|14|N|15|1|16]]|A|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|L]]|X|$5|T|U|V|A|$W|Y]]]]

You can also translate by half a pixel in the X and Y directions and then use whole values for your coordinates (you may need to round them in some cases):
<pre><code>context.translate(0.5, 0.5)

context.moveTo(5,5);
context.lineTo(55,5);
</code></pre>
Keep in mind that if you resize your canvas the translate will be reset - so you'll have to translate again.
You can read about the translate function and how to use it here:
<a href="https://www.rgraph.net/canvas/reference/translate.html" rel="noreferrer">https://www.rgraph.net/canvas/reference/translate.html</a>
<a href="https://stackoverflow.com/a/7531540/719276">This answer</a> explains why it works that way.

blocks|key|3999041|text|画布可以使用fillRect()绘制清晰的直线。高度为1px或宽度为1px的矩形即可完成此任务。它不需要半个像素值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3999042|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");|code-block|syntax|javascript|3999043|https://jsfiddle.net/ynur1rab/|offset|length|3999044|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

The Canvas can draw clean straight lines with fillRect().
A rectangle with a 1px height or a 1px width does the job.
It doesn't need half-pixel value:

<pre><code>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");
</code></pre>

<a href="https://jsfiddle.net/ynur1rab/" rel="nofollow noreferrer">https://jsfiddle.net/ynur1rab/</a>

blocks|key|3999060|text|fillRect()方法可用于在画布中绘制细长的水平线或垂直线(无需对坐标应用%2B0.5移位)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3999061|this.fillRect(left,+top,+1,+height);
this.fillRect(left,+top,+width,+1);|code-block|syntax|javascript|3999062|实际上，您只需将此代码替换为以下内容，就可以使代码行更细：|3999063|this.fillRect(left,+top,+0.7,+height);
this.fillRect(left,+top,+width,+0.7);|3999064|线条将变得更细(趋于达到1像素宽)，但它们的颜色会有一点衰减。|3999065|->+working+example|offset|length|3999066|需要注意的是，如果我们设置了ctx.lineWidth=0.7+(对于经典的beginPath/moveTo/lineTo/笔划序列)，它不能在Chrome上工作(0.7和1的解释是相同的)。因此，对这个fillRect()方法很感兴趣。|3999067|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Ghislain999/atzefve2/^0|0|0|0|0|0|0|I|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

The fillRect() method can be used to draw thin horizontal or vertical lines in canvas (without having to apply the +0.5 shift on coordinates):

<pre><code>this.fillRect(left, top, 1, height);
this.fillRect(left, top, width, 1);
</code></pre>

And you can actually make the lines even thinner by just replacing this code by something like: 

<pre><code>this.fillRect(left, top, 0.7, height);
this.fillRect(left, top, width, 0.7);
</code></pre>

Lines will be thinner (tending to reach 1 pixel wide) but their color a bit attenuated.

<a href="https://jsfiddle.net/Ghislain999/atzefve2/" rel="nofollow noreferrer">-> working example</a>

To be noted that if we set ctx.lineWidth=0.7 (for the classical beginPath/moveTo/lineTo/stroke sequence), it does not work on Chrome (0.7 and 1 are interpreted the same way). Thus an interest for this fillRect() method.

blocks|key|89096|text|如果这些答案对你都不起作用，请检查你的浏览器缩放。我的是125%25，所以每四条1px的线被画成2px宽。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|89097|我花了几个小时试图弄清楚为什么互联网上的每一把小提琴都能用，而我的却不行(缩放只为我的dev标签设置)|89098|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If none of these answers worked for you, check your browser zoom. Mine was somehow at 125% so every fourth 1px line was drawn 2px wide.

I spent hours trying to figure out why every fiddle on the internet worked and mine didn't (the zoom was only set for my dev tab)

blocks|key|4479928|text|对我来说，只有不同的“像素完美”技术的组合才能帮助归档结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4479929|使用像素比率获取和缩放画布的|4479930|：|ordered-list-item|4479931|4479932|在调整画布大小时使用window.devicePixelRatio/ctx.backingStorePixelRatio|4479933|Scale+pixelRatio+=+scaling).|unordered-list-item|4479934|
|4479935|multiple+pixelRatio+(避免使用canvas+default+stretch+scaling).|offset|length|style|BOLD|4479936|4479937|multiplepixelRatio找到合适的‘实际’像素线粗细：|4479938|4479939|context.lineWidth+=+thickness+*+pixelRatio;|4479940|Check线的粗细是奇数还是偶数。将pixelRatio的一半添加到奇数厚度值的行位置。|4479941|4479942|x+=x%2B+pixelRatio/2;|4479943|奇数行将被放置在像素的中间。上面的这一行是用来移动它的。|4479944|​|4479945|function+getPixelRatio(context)+{
++dpr+=+window.devicePixelRatio+%7C%7C+1,
++++bsr+=+context.webkitBackingStorePixelRatio+%7C%7C
++++context.mozBackingStorePixelRatio+%7C%7C
++++context.msBackingStorePixelRatio+%7C%7C
++++context.oBackingStorePixelRatio+%7C%7C
++++context.backingStorePixelRatio+%7C%7C+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+%25+2+==+0)+{
++++return+pos;
++}
++return+pos+%2B+pixelRatio+/+2;

}

rescale();
redraw();|code-block|syntax|javascript|4479946|canvas+{
++image-rendering:+-moz-crisp-edges;
++image-rendering:+-webkit-crisp-edges;
++image-rendering:+pixelated;
++image-rendering:+crisp-edges;
++width:+100vh;
++height:+100vh;
}|4479947|<canvas+id="canvas"></canvas>|4479948|4479949|Resize事件不会在剪辑中激发，因此您可以在github上尝试该文件|4479950|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ievgennaida/js-animation-timeline-control/blob/master/demo/pixel-perfect-example.html^0|0|0|0|0|0|0|0|9|1C|0|0|0|X|0|0|0|17|0|0|18|0|0|0|J|0|0|S|0|0|1|0|0|0|0|0|1|0|0|Z|N|6|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1V|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|20|8|@$Q|21|R|22|S|T]]|9|@]|A|$]]|$1|U|3|N|5|6|7|23|8|@]|9|@]|A|$]]|$1|V|3|W|5|L|7|24|8|@$Q|25|R|26|S|T]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|28|8|@$Q|29|R|2A|S|T]]|9|@]|A|$]]|$1|10|3|11|5|L|7|2B|8|@$Q|2C|R|2D|S|T]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2F|8|@$Q|2G|R|2H|S|T]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2I|8|@$Q|2J|R|2K|S|T]]|9|@]|A|$]]|$1|17|3|18|5|6|7|2L|8|@$Q|2M|R|2N|S|T]]|9|@]|A|$]]|$1|19|3|1A|5|1B|7|2O|8|@]|9|@]|A|$1C|1D]]|$1|1E|3|1F|5|1B|7|2P|8|@]|9|@]|A|$1C|1D]]|$1|1G|3|1H|5|1B|7|2Q|8|@]|9|@]|A|$1C|1D]]|$1|1I|3|18|5|6|7|2R|8|@$Q|2S|R|2T|S|T]]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2U|8|@$Q|2V|R|2W|S|T]]|9|@$Q|2X|R|2Y|1|2Z]]|A|$]]|$1|1L|3|-4|5|6|7|30|8|@]|9|@]|A|$]]]|1M|$1N|$5|1O|1P|1Q|A|$1R|1S]]]]

For me, only a combination of different 'pixel perfect' techniques helped to archive the results:

<ol>
<li>Get and scale canvas with the pixel ratio:

pixelRatio = window.devicePixelRatio/ctx.backingStorePixelRatio</li>
<li>Scale the canvas on the resize (avoid canvas default stretch scaling).</li>
<li>multiple the lineWidth with pixelRatio to find proper 'real' pixel line thickness:

context.lineWidth = thickness * pixelRatio;</li>
<li>Check whether the thickness of the line is odd or even. add half of the pixelRatio to the line position for the odd thickness values. 

x = x + pixelRatio/2;</li>
</ol>

The odd line will be placed in the middle of the pixel. The line above is used to move it a little bit.

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
 image-rendering: -moz-crisp-edges;
 image-rendering: -webkit-crisp-edges;
 image-rendering: pixelated;
 image-rendering: crisp-edges;
 width: 100vh;
 height: 100vh;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>


Resize event is not fired in the snipped so you can try the file on the <a href="https://github.com/ievgennaida/js-animation-timeline-control/blob/master/demo/pixel-perfect-example.html" rel="noreferrer">github</a>

In this jsfiddle there's a line with a lineWidth of 1.

<a href="http://jsfiddle.net/mailrox/9bMPD/350/" rel="noreferrer">http://jsfiddle.net/mailrox/9bMPD/350/</a>

e.g: 

<pre><code>ctx.lineWidth = 1;
</code></pre>

However the line is 2px thick when it's drawn on the canvas, how do you create a 1px thick line.

I could draw a rectangle (with 1px height) however I want the line to also work on diagonals. So how do you get this line to be 1px high?

Thanks!

Drawing a 1px thick line in canvas creates a 2px thick line

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在这个jsfiddle中，有一行lineWidth为1。例如：ctx.lineWidth = 1;然而，在画布上绘制的线条是2px粗的，如何创建1px粗的线条呢？我可以画一个矩形(高度为1px )，但是我希望这条线也能在对角线上工作。那么如何让这条线达到1px的高度呢？谢谢!

问在画布中绘制一条1px粗线将创建一条2px粗线
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在画布中绘制一条1px粗线将创建一条2px粗线EN