canvas教程

canvas stroke() beginPath() closePath()

字号+ 作者:H5之家 来源:H5之家 2017-01-04 16:22 我要评论( )

本文来自本站的【网页制作】栏目,canvas stroke() beginPath() closePath()

 

     

  一、beginPath()

  beginPath() 方法开始一条路径,或重置当前的路径。也就是说重新开始一条新路径,断开原来的路径。

  提示:请使用这些方法来创建路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

  提示:请使用 stroke() 方法在画布上绘制确切的路径。

  JavaScript 语法:

  context.fillRect(x,y,width,height);

  二、closePath()

  closePath() 方法创建从当前点到开始点的路径。

  提示:请使用 stroke() 方法在画布上绘制确切的路径。

  提示:请使用 fill() 方法来填充图像(默认是黑色)。请使用 fillStyle 属性来填充另一个颜色/渐变。

  三、stroke()

  stroke()方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

  提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。

  JavaScript 语法:

  context.stroke();

  四、综合示例

  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.closePath();
  ctx.stroke();
  ctx.fillStyle="green";
  ctx.fill();

  所绘制的图如下:

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 提高HTML5 canvas性能的几种方法!

    提高HTML5 canvas性能的几种方法!

    2017-01-04 13:00

  • 教你用html5 canvas写一个时钟详细解析教程源码

    教你用html5 canvas写一个时钟详细解析教程源码

    2017-01-02 16:00

  • HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

    2017-01-02 14:01

  • HTML5 Canvas標簽定義圖形

    HTML5 Canvas標簽定義圖形

    2016-12-31 11:04

网友点评
5