Question

我正在遵循以下教程：http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

我的问题是这条线变得模糊不清，而且不像它们的网站那样美观。

这是代码：

    var canvas = document.getElementById("rightSide");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(50, 100);
    context.lineTo(200, 100);
    context.stroke();


#leftSide {
    width:200px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
}

#rightSide {
    width:1000px;
    height: 700px;
    padding:15px;
    background:#eee;
    border:1px solid #aaa;
    float: left;
    margin:0px 0px 0px 20px;
}

<div id="leftSide">
    <a class="trigger" href="#">Areas</a>
    <ul class="level1">
                <li><a href="http://www.google.com">Area 1</a></li>
                <li><a href="#">Area 2</a></li>
                <li><a href="#">Area 3</a></li>
                <li><a href="#">Area 4</a></li>
                <li><a href="#">Area 5</a></li>
                <li><a href="#">Area 6</a></li> 
    </ul>

</div>

<canvas id="rightSide"></canvas>

感谢

编辑：我实际上发现了一些非常有趣的东西，但我仍然不明白它是如何产生任何不同的。当我将画布大小坐标从CSS移动到标记时，该行显示为OK。

canvas id =“rightSide”width =“800px”height =“600px”＆gt;

非常想解释这里发生了什么。感谢。

Answer 1

为了建立Parth的答案（在评论中正确识别），画布的实际大小是在属性上定义的，而不是CSS。

例如，如果您要使用以下代码，则绘图区域将为100x100而不是200x200。模糊效果与使用相同CSS的100x100图像时相同。

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas width="100" height="100"></canvas>

这实际上对iPhone 4或iPad 3这样的设备有意义，每个设备像素有4个物理像素。在这种情况下，适当大小的画布（100x100的100x100将是模糊的）。在这种情况下，您实际上需要将画布加倍以获得清晰的图像：

<style>
    canvas {width: 200px; height: 200px}
</style>
<canvas id="retina" width="400" height="400"></canvas>

Answer 2

浏览器通常会对绘制的线进行抗锯齿处理（实际上使用lineTo，arcTo，quadraticCurveTo等上下文函数）。

所以，如果你给出了起点（50,50）＆amp;终点（300,50），它会反混淆它，所以绘制的线条将显示为模糊，因为它将在49.5-50＆amp;＆amp ;; 55-55.5（如果线宽为5）。

因此，有时候解决方案是在浮点上给出坐标。浏览器接受浮点坐标并且不要忽略它，它将在其绘图算法中使用浮点数（可能是dda，我完全不知道）。

以下是示例:: http://jsfiddle.net/parth1403/xt7dN/2/

html5线模糊，没有出售

2 个答案: