小程序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(向线条的每个末端添加正方形线帽)