Javascript HTML5 canvas stroke() 粗而模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3991113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas stroke() thick and fuzzy
提问by Nona Urbiz
I'm trying to allow the user to draw a rectangle on the canvas (like a selection box). I'm getting some ridiculous results, but then I noticed that even just trying the code from my reference here, I get huge fuzzy lines and don't know why.
我试图允许用户在画布上绘制一个矩形（如选择框）。我得到了一些可笑的结果，但后来我发现，从我的参考，甚至只是想代码在这里，我得到巨大的模糊线，不知道为什么。
it's hosted at dylanstestserver.com/drawcss. the javascript is inline so you can check it out. I am using jQuery to simplify getting the mouse coordinates.
它托管在dylanstestserver.com/drawcss 上。javascript 是内联的，因此您可以查看它。我正在使用 jQuery 来简化获取鼠标坐标的过程。
回答by DougLeary
The blurry problem will happen if you use css to set the canvas height and width instead of setting height and width in the canvas element.
如果使用css设置canvas的高宽，而不是在canvas元素中设置高宽，就会出现模糊的问题。
<style>
canvas { height: 800px; width: 1200px; } WRONG WAY -- BLURRY LINES
</style>
<canvas height="800" width="1200"></canvas> RIGHT WAY -- SHARP LINES
回答by clarkf
For some reason, your canvas is stretched. Because you have its css property widthset to 100%, it is stretching it from some sort of native size. It's the difference between using the css widthproperty and the widthattribute on the <canvas>tag. You might want to try using a bit of javascript to make it fill the viewport (see jQuery .width()):
出于某种原因，你的画布被拉伸了。因为您将其 css 属性width设置为100%，所以它会从某种本机大小拉伸它。这是使用 csswidth属性和标签width上的属性的区别<canvas>。您可能想尝试使用一些 javascript 来填充视口（请参阅 jQuery .width()）：
jQuery(document).ready(function(){
var canvas = document.getElementById('drawing');
canvas.width(($(window).width()).height($(window).height());
var context = canvas.getContext('2d');
//...
回答by miller the gorilla
The way I do it is to set the canvas element to a width and height in the css, and then set the canvas.width = canvas.clientWidth and canvas.height = canvas.clientHeight
我这样做的方法是在css中设置canvas元素的宽度和高度，然后设置canvas.width = canvas.clientWidth和canvas.height = canvas.clientHeight
var canvas = document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");
回答by artificialidiot
You haven't indicated canvas size in pixels, so it is scaled up. It is 300x150 here. Try setting the width, height
您没有以像素为单位指示画布大小，因此它被放大了。这里是 300x150。尝试设置宽度，高度
回答by laktak
On retina displays you also need to scale (in addition to the accepted answer):
在视网膜显示器上，您还需要缩放（除了已接受的答案）：
var context = canvas.getContext('2d');
context.scale(2,2);
回答by Scott Antipa
The css sizing issue mentioned in these comments is correct, but another more subtle thing that can cause blurred lines is forgetting to call make a call to context.beginPath()before drawing a line. Without calling this, you will still get a line, but it won't be smoothed which makes the line looks like a series of steps.
这些评论中提到的 css 大小调整问题是正确的，但另一个可能导致模糊线条的更微妙的事情是context.beginPath()在绘制线条之前忘记调用 make a call 。不调用它，你仍然会得到一条线，但它不会被平滑，这使得线看起来像一系列步骤。
回答by Fijjit
I found the reason mine was blurry was that there was a slight discrepancy between the inline width and the CSS width.
我发现我的模糊的原因是内联宽度和 CSS 宽度之间存在轻微差异。
I have both inline width/height parameters AND css width/height assigned to my canvas, because I need to keep its physical dimensions static, while increasing its inline dimensions for retina screens.
我有两个内联宽度/高度参数和 css 宽度/高度分配给我的画布，因为我需要保持其物理尺寸静态，同时增加视网膜屏幕的内联尺寸。
Check yours are the same if you have a situation like mine.
如果您有像我这样的情况，请检查您的情况是否相同。
