html5-canvas之html5 线模糊且未售出

我正在学习以下教程: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> 

谢谢

编辑: 我实际上发现了一些非常有趣的东西，但我仍然不明白它有什么不同。 当我将 Canvas 大小坐标从 CSS 移动到标签时，该行显示正常。

canvas id="rightSide" width="800px" height="600px">

非常想了解这里发生的事情。 谢谢。

请您参考如下方法:

基于 Parth 的回答(在评论中正确识别)， Canvas 的实际大小是在属性上定义的，而不是 CSS。

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

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

这实际上对 iPhone 4 或 iPad 3 等设备具有有趣的影响，每个设备像素有四个物理像素。在这种情况下，一个适当大小的 Canvas (100x100 的 100x100 会很模糊)。在这种情况下，您实际上需要将 Canvas 加倍以获得清晰的图像:

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