路径描边设置样式

<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(); // 填充