画布图，如线条，是模糊的 [英] Canvas drawings, like lines, are blurry

问题描述

我有一个< div style =border：1px solid border; /> 和画布使用：

  context.lineWidth = 1; 
 context.strokeStyle =gray; 
  

绘图看起来模糊不清（lineWidth小于1会创建更糟糕的图片） div的边界。是否可以使用画布获得与HTML相同的绘图质量？

  var ctx = document.getElementById（canvas）。getContext（2d）; ctx.lineWidth = 1; ctx.moveTo 2）; ctx.lineTo（98,2）; ctx.lineTo（98,98）; ctx.lineTo（2,98）; ctx.lineTo（2,2）; ctx.stroke（）;  

  div {border：1px solid black; width：100px; height：100px;} canvas，div {background-color：＃F5F5F5;} canvas {border：1px solid white; display：block;}   < table>< tr>< td>画布线：< / td>< td> 1px border：< / td> ;< / tr>< tr>< td>< canvas id =canvaswidth =100height =100/>< / td>< td>< div> < / div>< / td>< / tr>< / table>  

$ b

解决方案

在画布上绘制线条时，实际上需要跨越像素。在我看来，这是API的一个奇怪的选择，但很容易使用：

而不是这样：

  context.moveTo（10，0）; 
 context.lineTo（10，30）; 
  

执行此操作：

  context.moveTo（10.5，0）; 
 context.lineTo（10.5，30）; 
  

深入HTML5画布一章很好地讨论这个问题

（查找ASK PROFESSOR MARKUP框大约四分之一）

I have a <div style="border:1px solid border;" /> and canvas, which is drawn using:

context.lineWidth = 1;
context.strokeStyle = "gray";

The drawing looks quite blurry (lineWidth less than one creates even worse picture), and nothing near to the div's border. Is it possible to get the same quality of drawing as HTML using canvas?

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

解决方案

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

instead of this:

context.moveTo(10, 0);
context.lineTo(10, 30);

do this:

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

dive into HTML5's canvas chapter talks about this nicely
(look for the 'ASK PROFESSOR MARKUP' box about 1/4th of the way down)

这篇关于画布图，如线条，是模糊的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！