我正在学习以下教程: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>
关于html5-canvas - html5 线模糊且未售出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10639064/