stroke方法怎么使用

小灰灰 2020-06-10 13:27 931阅读 0赞

stroke方法怎么使用

stroke() 方法会实际地绘制出通过moveTo() 和lineTo()方法定义的路径，默认颜色是黑色。下面我们就来具体看看stroke() 方法的使用方法。

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

  1. context.stroke();

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

代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  5. </canvas>
  6. <script>
  7. var c=document.getElementById("myCanvas");
  8. var ctx=c.getContext("2d");
  9. ctx.beginPath();
  10. ctx.moveTo(20,20);
  11. ctx.lineTo(20,100);
  12. ctx.lineTo(70,100);
  13. ctx.stroke();
  14. </script> 
  15. </body>
  16. </html>

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

发表评论

表情：
评论列表 （有 0 条评论，931人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript pop方法怎么使用

    Javascript数组的pop()方法可以从数组中删除最后一个元素并返回该元素。这样，数组长度或大小也会减少了一个，下面我们就来具体看一下JavaScript中pop方...

    朱雀朱雀/ 0 赞/ 746 阅读

    相关 fillRect方法怎么使用

    fillRect方法怎么使用 fillRect是HTML5中的方法，可以用于在画布上绘制已填充的矩形，默认的填充颜色是黑色，下面我们就来看一看fillRect方法的具体使用。

    小灰灰小灰灰/ 0 赞/ 951 阅读

    相关 stroke方法怎么使用

    stroke方法怎么使用 stroke() 方法会实际地绘制出通过moveTo() 和lineTo()方法定义的路径，默认颜色是黑色。下面我们就来具体看看stroke()...

    小灰灰小灰灰/ 0 赞/ 932 阅读