绘画Canvas的平行线
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');
/*绘制第一条线*/
/*设置绘图的起始位置*/
context.moveTo(100,100);
/*绘制路径*/
context.lineTo(200,100);
/*绘制第二条线*/
/*设置绘图的起始位置*/
context.moveTo(100,200);
/*绘制路径*/
context.lineTo(200,200);
/*描边*/
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>浏览器显示如下：
可以从上图看到已经绘画出了两条直线作为平行线。但是有以下两个问题：
- 绘制的直线默认宽度为多少？ 从对比边框border的1px来看，直线看上去有2px的宽度。其实这个直线的绘制宽度默认也只有1px，那么怎么会看起来有2px呢？
- 绘制的直线默认颜色是什么？ 直接看上去直线的颜色像是灰色。但是其实默认的颜色是黑色。那么怎么看起来像是灰色呢？
直线模糊以及黑色变灰色的问题原理
其实在绘制直线的时候，默认是绘制1px的宽度，但是绘制直线的中轴线位置是在坐标轴刻度的上，如下：
另外因为两边的线宽度都被强行扩展，这样就导致黑色扩展变为了灰色。
解决模糊问题的方法
只要偏移直线中轴线位置不在刻度上就可以了，如下图：
那么下面将平行线的其中一条进行偏移看看，代码如下：
在y轴的方向进行偏移0.5px，浏览器显示如下：
