0

我正在尝试使用两个for 循环绘制网格，一个用于绘制 10 条垂直线，另一个用于 10 条水平线。像这样：

for(var i=1;i<10;i++){
  context.moveTo(0,i*b/10);
  context.lineTo(a,i*b/10);
  context.stroke();
}

所以绘制的线条是不同的宽度，模糊......我读到在 moveTo() 和 lineTo() 方法中都添加了 0.5，但这也不起作用。没有实现所有 10 行相同的比例方式。首先，为什么会这样，我该怎么办？

这真的很奇怪。我已经测试了你在这里写的所有内容，结果是一样的。现在我拼命地打开了Firefox，一切看起来都很完美。所以它只是关于铬。

4

2 回答 2

2

在开始绘图之前添加此行

context.translate(0.5, 0.5);

如果您使用整数作为位置，线条将非常锋利。

特别是在您提供的代码中：

context.translate(0.5, 0.5);
....
context.moveTo(0, (i * b / 10)|0); /// y is rounded to integer

或代替翻译：

context.moveTo(0.5, (i * b / 10)|0);

使用画布，像素的中心不在屏幕上的绝对像素上。因此，您需要将其偏移半个像素以使其与实际像素对齐，否则像素将被亚像素化，从而导致抗锯齿线。

您也可以将 0.5 添加到每个位置而不是进行翻译，但翻译更简单。网格完成后翻译回来。

演示快照
演示快照

您的代码中还有第二个问题：您正在抚摸线然后继续添加到相同的路径，这将累积之前添加的所有行并降低性能。

同样，beginPath()如果所有线条都具有相同的特征（颜色、粗细等），也不需要为每条线条使用。您也不需要对每条线条进行描边。

只需将所有带有moveToand的行添加lineTo到 Path （moveTo将确保这些行没有连接），当循环完成时，然后执行 common stroke()。

在线演示在这里

/// translate 0.5
ctx.translate(0.5, 0.5);

/// create grid
ctx.beginPath();

/// add all grid lines to Path
for(;pos < width; pos += step) {
    ctx.moveTo(pos, 0);
    ctx.lineTo(pos, height);
    ctx.moveTo(0, pos);
    ctx.lineTo(width, pos);
}

/// common stroke = higher performance
ctx.stroke();
于 2013-09-11T18:33:28.407 回答
1

模糊是抗锯齿的，可以部分避免以整数指定绘图位置。

在此处输入图像描述

此外，如果您使用 lineWidth=.5 进行绘制并指定 0.5 的绘图偏移，您将拥有更清晰的线条。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/4gduD/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var w=canvas.width;
    var h=canvas.height;


    drawGrid("black", 20,20);


    function drawGrid(color, stepx, stepy) {
       ctx.save()

       ctx.strokeStyle = color;
       ctx.lineWidth = 0.5;
       ctx.clearRect(0, 0, w, h);

       for (var i = stepx + 0.5; i < w; i += stepx) {
         ctx.beginPath();
         ctx.moveTo(i, 0);
         ctx.lineTo(i, h);
         ctx.stroke();
       }

       for (var i = stepy + 0.5; i < h; i += stepy) {
         ctx.beginPath();
         ctx.moveTo(0, i);
         ctx.lineTo(w, i);
         ctx.stroke();
       }

       ctx.restore();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-09-11T18:08:56.950 回答