for 循环中的 lineTo() 方法答案

【问题标题】：lineTo() method in a for loopfor 循环中的 lineTo() 方法
【发布时间】：2013-09-11 17:50:14
【问题描述】：

我正在尝试使用两个 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，一切看起来都很完美。所以它只是关于铬。

【问题讨论】：

Looks fine for me on Chrome.
您能否发送更多代码块，以便我自己测试一下，看看您看到了什么？
在 Mac OS 10.8.4 上的最新 Chrome/FF/Sf 上，@bfavaretto 的小提琴对我来说也很好

标签： javascript html canvas drawing

【解决方案1】：

在开始绘制之前添加这条线

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()。您也不需要对每条线条进行描边。

只需将带有moveTo 和lineTo 的所有行添加到路径中（moveTo 将确保这些行没有连接），当循环完成后，再执行一个常见的stroke()。

ONLINE DEMO HERE

/// 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();

【讨论】：

【解决方案2】：

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

此外，如果您使用 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>

【讨论】：