blocks|key|1504281|text|对于图像，现在有了context.imageSmoothingEnabled=+false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1504282|但是，没有任何显式控制线条绘制的内容。您可能需要使用getImageData和putImageData绘制自己的线条(the+hard+way)。|1504283|entityMap|0|LINK|mutability|MUTABLE|url|http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-imagesmoothingenabled|1|http://en.wikipedia.org/wiki/Bresenham%2527s_line_algorithm^0|9|10|9|T|0|0|Q|C|13|C|1N|C|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

For images there's now <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-imagesmoothingenabled" rel="noreferrer"><code>context.imageSmoothingEnabled</code></a><code>= false</code>.

However, there's nothing that explicitly controls line drawing. You may need to draw your own lines (<a href="http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm" rel="noreferrer">the hard way</a>) using <code>getImageData</code> and <code>putImageData</code>.

blocks|key|1719510|text|在像ctx.lineTo(10.5,+10.5)这样的坐标上绘制1-pixel线。在点(10,+10)上绘制一条单像素线意味着该位置的1像素从9.5到达10.5，这导致在画布上绘制了两条线。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1719511|如果你有很多单像素的线条，不需要总是把0.5添加到你想要绘制的实际坐标上，一个很好的技巧是在开始时ctx.translate(0.5,+0.5)你的整个画布。|1719512|entityMap^0|2|M|W|7|17|8|1V|1|1Z|3|24|4|0|J|3|1D|N|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$]]

Draw your <code>1-pixel</code> lines on coordinates like <code>ctx.lineTo(10.5, 10.5)</code>. Drawing a one-pixel line over the point <code>(10, 10)</code> means, that this <code>1</code> pixel at that position reaches from <code>9.5</code> to <code>10.5</code> which results in two lines that get drawn on the canvas. 

A nice trick to not always need to add the <code>0.5</code> to the actual coordinate you want to draw over if you've got a lot of one-pixel lines, is to <code>ctx.translate(0.5, 0.5)</code> your whole canvas at the beginning.

blocks|key|1504515|text|它可以在Mozilla+Firefox中完成。将以下代码添加到您的代码中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504516|contextXYZ.mozImageSmoothingEnabled+=+false;|code-block|syntax|javascript|1504517|在Opera中，它目前是一个功能请求，但希望它很快就会添加进来。|1504518|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

It can be done in Mozilla Firefox. Add this to your code:

<pre><code>contextXYZ.mozImageSmoothingEnabled = false;
</code></pre>

In Opera it's currently a feature request, but hopefully it will be added soon.

blocks|key|1719698|text|我会使用自定义线条算法来绘制所有内容，比如Bresenham的线条算法。查看这个javascript实现：http://members.chello.at/easyfilter/canvas.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1719699|我想这一定会解决你的问题。|1719700|entityMap|0|LINK|mutability|MUTABLE|url|http://members.chello.at/easyfilter/canvas.html^0|1H|1B|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I would draw everything using a custom line algorithm such as Bresenham's line algorithm. Check out this javascript implementation:
<a href="http://members.chello.at/easyfilter/canvas.html" rel="noreferrer">http://members.chello.at/easyfilter/canvas.html</a>

I think this will definitely solve your problems.

blocks|key|1719797|text|我想补充的是，我在缩小图像和在画布上绘图时遇到了麻烦，它仍然使用平滑，即使它在缩放时没有使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719798|我用这个解决了问题：|1719799|function+setpixelated(context){
++++context['imageSmoothingEnabled']+=+false;+++++++/*+standard+*/
++++context['mozImageSmoothingEnabled']+=+false;++++/*+Firefox+*/
++++context['oImageSmoothingEnabled']+=+false;++++++/*+Opera+*/
++++context['webkitImageSmoothingEnabled']+=+false;+/*+Safari+*/
++++context['msImageSmoothingEnabled']+=+false;+++++/*+IE+*/
}|code-block|syntax|javascript|1719800|您可以像这样使用此函数：|1719801|var+canvas+=+document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))|1719802|也许这对某些人有用。|1719803|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I want to add that I had trouble when downsizing an image and drawing on canvas, it was still using smoothing, even though it wasn't using when upscaling.

I solved using this:

<pre><code>function setpixelated(context){
 context['imageSmoothingEnabled'] = false; /* standard */
 context['mozImageSmoothingEnabled'] = false; /* Firefox */
 context['oImageSmoothingEnabled'] = false; /* Opera */
 context['webkitImageSmoothingEnabled'] = false; /* Safari */
 context['msImageSmoothingEnabled'] = false; /* IE */
}
</code></pre>

You can use this function like this:

<pre><code>var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))
</code></pre>

Maybe this is useful for someone.

blocks|key|1719728|text|ctx.translate(0.5,+0.5);
ctx.lineWidth+=+.5;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1719729|有了这个组合，我可以画出漂亮的1px细线条。|unstyled|1719730|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;
</code></pre>

With this combo I can draw nice 1px thin lines.

blocks|key|1504788|text|注意一个非常有限的技巧。如果要创建双色图像，可以使用颜色#010101在颜色#000000的背景上绘制任何形状。完成后，您可以测试imageData.data[]中的每个像素，并将其设置为0xFF，而不是0x00：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504789|imageData+=+context2d.getImageData+(0,+0,+g.width,+g.height);
for+(i+=+0;+i+!=+imageData.data.length;+i+%2B%2B)+{
++++if+(imageData.data[i]+!=+0x00)
++++++++imageData.data[i]+=+0xFF;
}
context2d.putImageData+(imageData,+0,+0);|code-block|syntax|javascript|1504790|结果将是一个非抗锯齿的黑白图片。这将不是完美的，因为会发生一些抗锯齿，但这种抗锯齿将是非常有限的，形状的颜色非常像背景的颜色。|1504791|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Notice a very limited trick. If you want to create a 2 colors image, you may draw any shape you want with color #010101 on a background with color #000000. Once this is done, you may test each pixel in the imageData.data[] and set to 0xFF whatever value is not 0x00 :

<pre><code>imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
 if (imageData.data[i] != 0x00)
 imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);
</code></pre>

The result will be a non-antialiased black &amp; white picture. This will not be perfect, since some antialiasing will take place, but this antialiasing will be very limited, the color of the shape being very much like the color of the background.

blocks|key|1504999|text|试试像canvas+{+image-rendering:+pixelated;+}这样的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1505000|如果你只想让一行没有抗锯齿，这可能行不通。|1505001|​|1505002|const+canvas+=+document.querySelector("canvas");
const+ctx+=+canvas.getContext("2d");

ctx.fillRect(4,+4,+2,+2);|code-block|syntax|javascript|1505003|canvas+{
++image-rendering:+pixelated;
++width:+100px;
++height:+100px;+/*+Scale+10x+*/
}|1505004|<html>
++<head></head>
++<body>
++++<canvas+width="10"+height="10">Canvas+unsupported</canvas>
++</body>
</html>|1505005|1505006|不过，我还没有在很多浏览器上测试过。|1505007|entityMap^0|3|12|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|16|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|W|$]]

Try something like <code>canvas { image-rendering: pixelated; }</code>.
This might not work if you're trying to only make one line not antialiased.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.fillRect(4, 4, 2, 2);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
 image-rendering: pixelated;
 width: 100px;
 height: 100px; /* Scale 10x */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
 &lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;canvas width="10" height="10"&gt;Canvas unsupported&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

I haven't tested this on many browsers though.

blocks|key|1720157|text|添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1720158|image-rendering:+pixelated;+image-rendering:+crisp-edges;|code-block|syntax|javascript|1720159|添加到canvas元素的style属性有助于在画布上绘制清晰的像素。通过这篇伟大的文章发现：|1720160|https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look|offset|length|1720161|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|26|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Adding this:
<pre><code>image-rendering: pixelated; image-rendering: crisp-edges;
</code></pre>
to the style attribute of the canvas element helped to draw crisp pixels on the canvas. Discovered via this great article:
<a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look</a>

blocks|key|1719982|text|对于那些仍在寻找答案的人。这是我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1719983|求和图像为1通道灰度。我刚刚在ctx.stroke()之后设置了阈值。|1719984|ctx.beginPath();
ctx.moveTo(some_x,+some_y);
ctx.lineTo(some_x,+some_y);
...
ctx.closePath();
ctx.fill();
ctx.stroke();

let+image+=+ctx.getImageData(0,+0,+ctx.canvas.width,+ctx.canvas.height)
for(let+x=0;+x+<+ctx.canvas.width;+x%2B%2B)+{
++for(let+y=0;+y+<+ctx.canvas.height;+y%2B%2B)+{
++++if(image.data[x*image.height+%2B+y]+<+128)+{
++++++image.data[x*image.height+%2B+y]+=+0;
++++}+else+{
++++++image.data[x*image.height+%2B+y]+=+255;
++++}
++}
}|code-block|syntax|javascript|1719985|如果您的图像通道是3或4。您需要修改数组索引，如下所示|1719986|x*image.height*number_channel+%2B+y*number_channel+%2B+channel|1719987|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For those who still looking for answers. here is my solution.

Assumming image is 1 channel gray. I just thresholded after ctx.stroke().

<pre><code>ctx.beginPath();
ctx.moveTo(some_x, some_y);
ctx.lineTo(some_x, some_y);
...
ctx.closePath();
ctx.fill();
ctx.stroke();

let image = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
for(let x=0; x &lt; ctx.canvas.width; x++) {
 for(let y=0; y &lt; ctx.canvas.height; y++) {
 if(image.data[x*image.height + y] &lt; 128) {
 image.data[x*image.height + y] = 0;
 } else {
 image.data[x*image.height + y] = 255;
 }
 }
}
</code></pre>

if your image channel is 3 or 4. you need to modify the array index like

<pre><code>x*image.height*number_channel + y*number_channel + channel
</code></pre>

blocks|key|1504913|text|下面是Bresenham算法在JavaScript中的基本实现。它基于维基百科文章中描述的整数算术版本：https://en.wikipedia.org/wiki/Bresenham%2527s_line_algorithm|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1504914|++++function+range(f=0,+l)+{
++++++++var+list+=+[];
++++++++const+lower+=+Math.min(f,+l);
++++++++const+higher+=+Math.max(f,+l);
++++++++for+(var+i+=+lower;+i+<=+higher;+i%2B%2B)+{
++++++++++++list.push(i);
++++++++}
++++++++return+list;
++++}

++++//Don't+ask+me.
++++//https://en.wikipedia.org/wiki/Bresenham%2527s_line_algorithm
++++function+bresenhamLinePoints(start,+end)+{

++++++++let+points+=+[];

++++++++if(start.x+===+end.x)+{
++++++++++++return+range(f=start.y,+l=end.y)
++++++++++++++++++++++++.map(yIdx+=>+{
++++++++++++++++++++++++++++return+{x:+start.x,+y:+yIdx};
++++++++++++++++++++++++});
++++++++}+else+if+(start.y+===+end.y)+{
++++++++++++return+range(f=start.x,+l=end.x)
++++++++++++++++++++++++.map(xIdx+=>+{
++++++++++++++++++++++++++++return+{x:+xIdx,+y:+start.y};
++++++++++++++++++++++++});
++++++++}

++++++++let+dx+=+Math.abs(end.x+-+start.x);
++++++++let+sx+=+start.x+<+end.x+?+1+:+-1;
++++++++let+dy+=+-1*Math.abs(end.y+-+start.y);
++++++++let+sy+=+start.y+<+end.y+?+1+:+-+1;
++++++++let+err+=+dx+%2B+dy;

++++++++let+currX+=+start.x;
++++++++let+currY+=+start.y;

++++++++while(true)+{
++++++++++++points.push({x:+currX,+y:+currY});
++++++++++++if(currX+===+end.x+&&+currY+===+end.y)+break;
++++++++++++let+e2+=+2*err;
++++++++++++if+(e2+>=+dy)+{
++++++++++++++++err+%2B=+dy;
++++++++++++++++currX+%2B=+sx;
++++++++++++}
++++++++++++if(e2+<=+dx)+{
++++++++++++++++err+%2B=+dx;
++++++++++++++++currY+%2B=+sy;
++++++++++++}
++++++++}

++++++++return+points;

++++}|code-block|syntax|javascript|1504915|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Bresenham%2527s_line_algorithm^0|1G|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Here is a basic implementation of Bresenham's algorithm in JavaScript. It's based on the integer-arithmetic version described in this wikipedia article: <a href="https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm</a>

<pre><code> function range(f=0, l) {
 var list = [];
 const lower = Math.min(f, l);
 const higher = Math.max(f, l);
 for (var i = lower; i &lt;= higher; i++) {
 list.push(i);
 }
 return list;
 }

 //Don't ask me.
 //https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
 function bresenhamLinePoints(start, end) {

 let points = [];

 if(start.x === end.x) {
 return range(f=start.y, l=end.y)
 .map(yIdx =&gt; {
 return {x: start.x, y: yIdx};
 });
 } else if (start.y === end.y) {
 return range(f=start.x, l=end.x)
 .map(xIdx =&gt; {
 return {x: xIdx, y: start.y};
 });
 }

 let dx = Math.abs(end.x - start.x);
 let sx = start.x &lt; end.x ? 1 : -1;
 let dy = -1*Math.abs(end.y - start.y);
 let sy = start.y &lt; end.y ? 1 : - 1;
 let err = dx + dy;

 let currX = start.x;
 let currY = start.y;

 while(true) {
 points.push({x: currX, y: currY});
 if(currX === end.x &amp;&amp; currY === end.y) break;
 let e2 = 2*err;
 if (e2 &gt;= dy) {
 err += dy;
 currX += sx;
 }
 if(e2 &lt;= dx) {
 err += dx;
 currY += sy;
 }
 }

 return points;

 }
</code></pre>

I'm playing around with the <a href="http://developer.mozilla.org/en/HTML/Canvas" rel="noreferrer"><code>&lt;canvas&gt;</code></a> element, drawing lines and such.

I've noticed that my diagonal lines are antialiased. I'd prefer the jaggy look for what I'm doing - is there any way of turning this feature off?

Can I turn off antialiasing on an HTML <canvas> element?

我正在使用元素，画线之类的东西。我注意到我的对角线是抗锯齿的。对于我正在做的事情，我更喜欢参差不齐的外观--有什么方法可以关闭这个功能吗？

问我可以关闭一个超文本标记语言<canvas>元素的抗锯齿吗？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以关闭一个超文本标记语言<canvas>元素的抗锯齿吗？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以关闭一个超文本标记语言<canvas>元素的抗锯齿吗？
EN