Canvas绘画三条平行线
<!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.5);
context.lineTo(200,100.5);
/*绘制第二条线*/
context.moveTo(100,200);
context.lineTo(200,200);
/*绘制第三条线*/
context.moveTo(100,300);
context.lineTo(200,300);
/*描边*/
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器展示如下：
使用strokeStyle和lineWidth设置画笔的颜色以及宽度
context.strokeStyle = 'pink'; // 设置颜色
context.lineWidth = 10; // 设置宽度
从图中可以看到，在每条直线都设置上了颜色和宽度，那么会不会画出三条不同颜色的直线呢？
看看浏览器展示如下：
原因是因为每条直线都各自设置context的属性，上面的属性设置都被最下面的设置覆盖了，所以就是最后设置的粉红色。
那么怎么才可以绘画出三条不同颜色的指向呢？
使用beginPath()开启新路径，绘画三条不同颜色的直线
context.beginPath(); // 开启新路径
context.stroke();
注意：每次设置开启新路径之后，都要设置描边，不然就会无法绘画。
看看浏览器的展示如下：
