路径描边设置样式

<canvas id="cvs" width="800" height="600"></canvas>

<script>
// 想要在Cavnas上面画图，就需要用JavaScript
// 2. 取得绘图工具：我们可以从canvas标签上获取一个绘图对象（上下文对象），
// 绘图的各种方法和设置，都放在这个对象上.
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d'); // 获取canvas2d绘图工具
// 3. 绘制路径。
ctx.moveTo(50,50); // 把“钢笔”移动到图像的某个位置上
ctx.lineTo(150,50); // 用“钢笔”连线到某个点上
ctx.lineTo(150,150);
ctx.lineTo(50,150);
ctx.lineTo(50,50);
// 现在我们的canvas上还什么都没有呢，为什么？ 因为moveTo和lineTo是用来绘制路径的。
// 路径是用来描述我们想要绘制的形状或者线条的“草稿”
// 4. 填充或者描边路径。
// 在描边或者填充之前，我们可以设置描边或者填充的颜色。
// Canvas是“画过之后浏览器就不管他了”的机制，
// 所以我们想要设置描边或者填充的样式，必须在描边或者填充之前
// 如果我们已经描边或者填充了，再去设置样式，是不管用的

ctx.strokeStyle = 'lightgreen'; // 设置描边的颜色为绿
ctx.lineWidth = 25; // 设置描边的线条宽度
ctx.stroke(); // 描边

ctx.fillStyle = 'pink';
ctx.fill(); // 填充