本文通过HTML和JavaScript代码展示了如何在Canvas上绘制不同颜色、宽度和端点形状的线条，以及如何构建和重置路径。重点讲解了lineTo方法、strokeStyle属性和路径操作，如closePath用于闭合路径。
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="600">您的浏览器不支持Canvas</canvas>
<script>
var canvas = document.getElementById('cavsElem'); //获取画布
var context = canvas.getContext('2d'); //准备画笔
context.lineWidth = '10'; //设置线条的宽度
context.strokeStyle = '#f00'; //设置线条的颜色
context.lineCap = 'round'; //设置线条的端点形状
context.moveTo(10,120) //定义线条的起点坐标
context.lineTo(50,120); //定义连接端点
context.lineTo(10,150); //定义连接端点
context.lineTo(50,150); //定义连接端点
context.stroke(); //为线条描边
//绘制蓝色的字母“z”
context.beginPath(); //重置路径
context.strokeStyle = 'blue'; //设置线条的颜色为蓝色
context.lineCap = 'butt'; //定义端点平直
context.moveTo(10,180); //定义初始位置
context.lineTo(50,180); //定义连线端点
context.lineTo(10,210); //定义连线端点
context.lineTo(50,210); //定义连线端点
context.stroke(); //描边路径
//绘制粉色的字母“z”
context.beginPath(); //重置路径
context.strokeStyle = 'pink'; //设置线条的颜色为粉色
context.lineCap = 'square'; //定义端点方形
context.moveTo(10,240); //定义初始位置
context.lineTo(50,240); //定义连线端点
context.lineTo(10,280); //定义连线端点
context.lineTo(50,280); //定义连线端点
context.stroke(); //描边路径
</script>
</body>
</html>
上述代码中：
第13行代码使用lineWidth属性定义线条的宽度，该属性的默认宽度为1px，取值为数值（不带单位），以像素为计量单位；
第14行代码使用strokeStyle属性定义描边的颜色，该属性的取值为十六进制颜色值或颜色英文，默认为黑色；
第16~18行代码使用lineTo(x,y)方法来定义连线端点，同时也需要定义x和y的坐标位置；
第19行代码使用stroke()方法给线条添加描边，让线条变得可见。
第24行和33行代码处分别定义了端点的形状；
第22行和31行代码处使用beginPath()方法重置了路径，这是因为在同一画布中，如果想要开始新的路径或重置当前的路径，就需要使用beginPath()方法，当出现beginPath()即表示路径重新开始。
运行效果
从上到下3个图案依次是红色、蓝色和粉色。
线是所有复杂图案的组成基础，想要绘制复杂的图形，首先要从绘制线开始。线由起始位置、连接端点和描边组成。设置了butt（蓝色字母）和square（粉色字母）图案的端点形状是一样的，区别在于蓝色图案比红色和粉色图案短一截，这是因为该图案没有闭合路径。我们可以在stroke()方法前使用closePath()方法来闭合路径，该方法是创建从当前点到开始点的路径。
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
