路径描边设置样式

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

壁纸样机神器

免费壁纸样机生成

0

查看详情