javascript - 关于很诡异的canvas线条粗细的问题
本文介绍了javascript - 关于很诡异的canvas线条粗细的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
canvas{width: 1000px;height: 500px;}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="500" ></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,200);
context.lineTo(200,200);
context.moveTo(100,300-0.5);
context.lineTo(200,300-0.5);
context.stroke();
</script>
</html>在偶然的情况下。我发现-0.5能实现我想要让线条变细的样式，lineWidth明明是设置线宽，但实际上是附带了颜色深浅。最小只能到1.但是为什么我设置坐标减少0.5后线条反而变细了呢？不太懂。求解
解决方案
canvas的线条画法不一样，canvas的每条线都有一条无限细的中线，线条的宽度是从中线向两侧延伸的。
如果我们还是从像素点画一条线，那么线条的中线就会靠齐到像素的起点，
然后我们开始画了，问题也就来了：Canvas 的线条以中线向两侧延伸，而不是向某一边延伸
(比如如果只是往单侧延伸，那么我们的问题就不再是问题了)
此时又有个问题：计算机不允许出现小于1px的图形，所以他做了一个折中的事：把这两个像素都绘制了。
所以，如此一来，本来1px的线条，就成了看起来2px宽的线条。
失败的原因找到了：Canvas中的line把中线与像素的起点对齐了，而不是像素的中间点。
那么我们怎么解决这个蛋疼的问题？也许有人已经想到了：既然是因为两个的起点不一样，那我们就把他们的起点变得一样吧！我们让线条的中线和像素的中间点对齐就行了！
像素的中间点很好找，比如第2像素的中间点，依据图上的解释就是1.5像素的位置，那么x像素的中间点就是(x-0.5)px。
这篇关于javascript - 关于很诡异的canvas线条粗细的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
