目录

小程序canvas

CanvasContext.arc

CanvasContext.arc(number x(圆心的 x 坐标), number y(圆心的 y 坐标), number r(圆的半径), number sAngle(起始弧度，单位弧度（在 3 点钟方向）), number eAngle(终止弧度), boolean counterclockwise(弧度的方向是否是逆时针))

创建一条弧线。

• 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。 • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

针对 arc(100, 75, 50, 0, 1.5 _ Math.PI)的三个关键坐标如下： • 绿色: 圆心 (100, 75) • 红色: 起始弧度 (0) • 蓝色: 终止弧度 (1.5 _ Math.PI)

  const ctx = createCanvasContext("arcCanvas");
  // Draw coordinates
  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.setFillStyle("#EEEEEE");
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(40, 75);
  ctx.lineTo(160, 75);
  ctx.moveTo(100, 15);
  ctx.lineTo(100, 135);
  ctx.setStrokeStyle("#AAAAAA");
  ctx.stroke();

  ctx.setFontSize(12);
  ctx.setFillStyle("black");
  ctx.fillText("0", 165, 78);
  ctx.fillText("0.5*PI", 83, 145);
  ctx.fillText("1*PI", 15, 78);
  ctx.fillText("1.5*PI", 83, 10);

  // Draw points
  ctx.beginPath();
  ctx.arc(100, 75, 2, 0, 2 * Math.PI);
  ctx.setFillStyle("lightgreen");
  ctx.fill();

  ctx.beginPath();
  ctx.arc(100, 25, 2, 0, 2 * Math.PI);
  ctx.setFillStyle("blue");
  ctx.fill();

  ctx.beginPath();
  ctx.arc(150, 75, 2, 0, 2 * Math.PI);
  ctx.setFillStyle("red");
  ctx.fill();

  // Draw arc
  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
  ctx.setStrokeStyle("#333333");
  ctx.stroke();

  ctx.draw();

CanvasContext.arcTo

CanvasContext.arcTo(number x1(第一个控制点的 x 轴坐标), number y1(第一个控制点的 y 轴坐标),number x2(第二个控制点的 x 轴坐标), number y2(第二个控制点的 y 轴坐标), number r(圆的半径))

根据控制点和半径绘制圆弧路径

  const ctx = createCanvasContext("arcToCanvas");
  ctx2.beginPath();
  ctx2.moveTo(20, 20); // 创建开始点
  // ctx2.lineTo(100, 20); // 创建水平线
  ctx2.arcTo(150, 20, 150, 70, 50); // 创建弧
  // ctx2.lineTo(150, 120); // 创建垂直线
  ctx2.setStrokeStyle("#AAAAAA");
  ctx2.stroke();
  ctx2.draw();

CanvasContext.beginPath/.closePath

CanvasContext.beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边 • 在最开始的时候相当于调用了一次 beginPath。 • 同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth 等设置，以最后一次设置为准。

CanvasContext.closePath()

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

  const ctx = createCanvasContext("beginPathCanvas");
  // begin path
  ctx.rect(10, 10, 100, 30);
  ctx.setFillStyle("yellow");
  ctx.fill();

  // begin another path
  ctx.beginPath();
  ctx.rect(10, 40, 100, 30);

  // only fill this rect, not in current path
  ctx.setFillStyle("blue");
  ctx.fillRect(10, 70, 100, 30);

  ctx.rect(10, 100, 100, 30);

  // it will fill current path
  ctx.setFillStyle("red");
  ctx.fill();

  ctx.beginPath();
  ctx.rect(10, 130, 100, 30);

  ctx.setFillStyle("yellow");
  ctx.fillRect(10, 160, 100, 30);

  ctx.setFillStyle("black");
  // ctx.fill();
  ctx.stroke();
  ctx.closePath();

  // begin another path
  ctx.beginPath();
  ctx.rect(10, 190, 100, 30);

  ctx.setFillStyle("gray");
  ctx.fillRect(10, 220, 100, 30);

  // it will fill current path
  ctx.setFillStyle("green");
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(150, 20);
  ctx.lineTo(150, 100);
  ctx.lineTo(200, 100);
  ctx.closePath();
  ctx.stroke();
  ctx.draw();

CanvasContext.fill

  const ctx = createCanvasContext("fillCanvas");

  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);
  ctx.lineTo(100, 100);
  ctx.fill();
  ctx.draw();

  ctx.setFillStyle("red");
  ctx.fillRect(150, 10, 150, 75);
  ctx.draw(true);

  ctx.rect(10, 110, 100, 75);
  ctx.setFillStyle("red");
  ctx.fill();

  ctx.beginPath();
  ctx.rect(150, 110, 100, 75);
  ctx.setStrokeStyle("blue");
  ctx.stroke();
  ctx.draw(true);

  ctx.setStrokeStyle("red");
  ctx.strokeRect(10, 200, 100, 75);
  ctx.draw(true);

CanvasContext.fill()

对当前路径中的内容进行填充。默认的填充色为黑色。 fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect()包含进去。

CanvasContext.fillRect(number x(矩形路径左上角的横坐标), number y(矩形路径左上角的纵坐标), number width(矩形路径的宽度), number height(矩形路径的高度))

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

CanvasContext.rect(number x(矩形路径左上角的横坐标), number y(矩形路径左上角的纵坐标), number width(矩形路径的宽度), number height(矩形路径的高度))

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

CanvasContext.strokeRect(number x(矩形路径左上角的横坐标), number y(矩形路径左上角的纵坐标), number width(矩形路径的宽度), number height(矩形路径的高度))

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

CanvasContext.fillText

  const ctx = createCanvasContext("fillTextCanvas");

  ctx.setFontSize(10);
  ctx.fillText("Hello", 20, 20);
  ctx.setFontSize(30);
  ctx.fillText("MINA", 20, 50);

  ctx.setFontSize(20);
  ctx.strokeText("MINA", 20, 80);

  ctx.draw();

  ctx.setStrokeStyle("red");
  ctx.moveTo(150, 20);
  ctx.lineTo(150, 170);
  ctx.stroke();

  ctx.setFontSize(15);
  ctx.setTextAlign("left");
  ctx.fillText("textAlign=left", 150, 60);

  ctx.setTextAlign("center");
  ctx.fillText("textAlign=center", 150, 80);

  ctx.setTextAlign("right");
  ctx.fillText("textAlign=right", 150, 100);

  ctx.draw(true);

  ctx.setStrokeStyle("red");
  ctx.moveTo(5, 220);
  ctx.lineTo(295, 220);
  ctx.stroke();

  ctx.setFontSize(20);

  ctx.setTextBaseline("top");
  ctx.fillText("top", 50, 220);

  ctx.setTextBaseline("middle");
  ctx.fillText("middle", 120, 220);

  ctx.setTextBaseline("bottom");
  ctx.fillText("bottom", 200, 220);

  ctx.setTextBaseline("normal");
  ctx.fillText("normal", 280, 220);

  ctx.draw(true);

CanvasContext.fillText(string text(在画布上输出的文本), number x(绘制文本的左上角 x 坐标位置), number y(绘制文本的左上角 y 坐标位置), number maxWidth(需要绘制的最大宽度，可选))

在画布上绘制被填充的文本

CanvasContext.strokeText(string text(要绘制的文本), number x(文本起始点的 x 轴坐标), number y(文本起始点的 y 轴坐标), number maxWidth(需要绘制的最大宽度，可选))

给定的 (x, y) 位置绘制文本描边的方法

CanvasContext.setFontSize(number fontSize)

设置字体的字号

CanvasContext.setTextAlign(string align)

设置文字的对齐 left(左对齐)、center(居中对齐)、right(右对齐)

CanvasContext.setTextBaseline(string textBaseline)

设置文字的竖直对齐 top(顶部对齐)、bottom(底部对齐)、middle(居中对齐)、normal

CanvasContext.Line

  const ctx = createCanvasContext("lineCanvas");

  ctx.moveTo(10, 10);
  ctx.lineTo(100, 10);

  ctx.moveTo(10, 30);
  ctx.lineTo(100, 30);
  ctx.stroke();

  ctx.moveTo(200, 10);
  ctx.rect(200, 10, 100, 50);
  ctx.lineTo(300, 60);
  ctx.stroke();

  ctx.draw();

  ctx.beginPath();
  ctx.moveTo(10, 100);
  ctx.lineTo(150, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineWidth(5);
  ctx.moveTo(10, 130);
  ctx.lineTo(150, 130);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineWidth(10);
  ctx.moveTo(10, 150);
  ctx.lineTo(150, 150);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineWidth(15);
  ctx.moveTo(10, 170);
  ctx.lineTo(150, 170);
  ctx.stroke();

  ctx.draw(true);
  ctx.beginPath();
  ctx.moveTo(170, 100);
  ctx.lineTo(300, 100);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineCap("butt");
  ctx.setLineWidth(10);
  ctx.moveTo(170, 130);
  ctx.lineTo(300, 130);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineCap("round");
  ctx.setLineWidth(10);
  ctx.moveTo(170, 150);
  ctx.lineTo(300, 150);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineCap("square");
  ctx.setLineWidth(10);
  ctx.moveTo(170, 170);
  ctx.lineTo(300, 170);
  ctx.stroke();

  ctx.draw(true);

CanvasContext.moveTo(number x(目标位置的 x 坐标), number y(目标位置的 y 坐标))

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

CanvasContext.lineTo(number x(目标位置的 x 坐标), number y(目标位置的 y 坐标))

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

CanvasContext.setLineWidth(number lineWidth)

设置线条的宽度

CanvasContext.setLineCap(string lineCap)

设置线条的端点样式 butt(向线条的每个末端添加平直的边缘)、round(向线条的每个末端添加圆形线帽)、square(向线条的每个末端添加正方形线帽)

Loading Disqus comments...