Dzwebs.Net

撰写电脑技术杂文十余年

canvas stroke() beginPath() closePath()

Admin | 2016-4-28 5:34:42 | 被阅次数 | 5144

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  一、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();

  所绘制的图如下:

canvas样图


该杂文来自: 网页制作杂文

上一篇:js修改canvas高度宽度的正确方法

下一篇:jquery canvas 画扇形

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计