• 技术文章 >web前端 >H5教程

    stroke方法怎么使用

    不言不言2019-02-12 17:25:33原创393
    stroke() 方法会实际地绘制出通过moveTo() 和lineTo()方法定义的路径,默认颜色是黑色。下面我们就来具体看看stroke() 方法的使用方法。

    HTML5

    我们先来看一下stroke() 方法的基本语法:

    context.stroke();

    接下来我们来看一下具体的示例

    代码如下

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    </canvas>
    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.stroke();
    </script> 
    </body>
    </html>

    效果如下:我们可以看到绘制了一个L型的黑色路径。

    微信截图_20190212171421.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的其他相关栏目教程!!!

    以上就是stroke方法怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第八期线上培训班
    专题推荐:stroke
    上一篇:fillRect方法怎么使用 下一篇:canvas橡皮筋式线条绘图的方法介绍(代码示例)

    相关文章推荐

    • HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)_html5教程技巧• css text-fill-color与text-stroke讲解• HTML5 Canvas 填充与描边(Fill And Stroke) 实现的实例代码• h5 Canvas中Fill 与Stroke文字效果实现实例• 如何使用css text-stroke属性来制作文字描边?(源代码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网