Question

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

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

因此绘制的线条是不同的widthes，模糊..我在moveTo（）和lineTo（）方法中添加0.5，但这也不起作用。没有比例方式来实现所有10条线是相同的。首先，为什么会这样，我该怎么办？

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

Answer 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而不是进行翻译，但翻译更简单。只需在网格完成后翻译回来。

demo snapshot
^演示快照

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

同样，如果所有线条具有相同的特征（颜色，厚度等），也不需要对每条线使用beginPath()，也不需要每条线都划线。

只需将moveTo和lineTo的所有行添加到路径中（moveTo将确保线路未连接），并在循环完成后再执行常规{ {1}}。

<强> ONLINE DEMO HERE

stroke()

Answer 2

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

enter image description here

此外，如果使用lineWidth = .5绘制并指定.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>

for循环中的lineTo（）方法

2 个答案: