您的位置：首页 > Web前端 > HTML5

【坑】html5中使用context.lineWidth设置线的宽度是1，然而输出的宽度是2的原因

2015-08-11 19:35 816 查看

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
context.beginPath();
context.lineWidth = 1;
context.moveTo(100, 100);
context.lineTo(600, 100);
context.stroke();
context.beginPath();
context.moveTo(100.5, 200.5);
context.lineTo(600.5, 200.5);
context.stroke();
</script>
</html>

在线演示

原因

可以看到上面一条线比下面的要粗，产生原因是因为当我们要在(100,100)和(600,100)这两个像素之间划线的时候，实际上是把那个宽度为1的线段的中间线画在了(100,100)和(600,100)，而线段的0.5像素的图像画在了那条中间线的上部，另一0.5像素画在了中间线的下部，所以这条线段实际上是跨了两个像素的宽度的。之后浏览器自动把0.5像素化成了1个像素，所以结果就会画出宽度为2的线段了。如下图所示，在(1,0)和(1,3)之间划线的效果如下



图中红色框框的部分就是浏览器自己补全的（有可能是淡色，类似抗锯齿的效果）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航