import { Canvas } from "../Canvas";
import { ImagePattern, repetitions } from "./ImagePattern";
import { TextMeasurement } from "./TextMeasurement";
declare const globalCompositeOperations: readonly [
    "darken",
    "destination-out",
    "hard-light",
    "lighten",
    "lighter",
    "overlay",
    "source-atop",
    "source-over",
    "xor"
];
declare type GlobalCompositeOperation = typeof globalCompositeOperations[number];
declare const lineCapStyles: readonly [
    "butt",
    "round",
    "square"
];
/**
 * @value 'butt' 向线条的每个末端添加平直的边缘
 * @value 'round' 向线条的每个末端添加圆形线帽
 * @value 'square' 向线条的每个末端添加正方形线帽
 */
declare type LineCapStyle = typeof lineCapStyles[number];
declare const lineJoinStyles: readonly [
    "bevel",
    "miter",
    "round"
];
/**
 * @value 'bevel' 斜角
 * @value 'miter' 尖角
 * @value 'round' 圆角
 */
declare type LineJoinStyle = typeof lineJoinStyles[number];
declare const textAlignStyles: readonly [
    "left",
    "center",
    "right"
];
/**
 * @value 'left' 左对齐
 * @value 'center' 居中对齐
 * @value 'right' 右对齐
 */
declare type TextAlignStyle = typeof textAlignStyles[number];
declare const textBaselineStyles: readonly [
    "top",
    "buttom",
    "middle",
    "normal"
];
/**
 * @value 'top' 顶部对齐
 * @value 'bottom' 底部对齐
 * @value 'middle' 居中对齐
 * @value 'normal' 不对齐
 */
declare type TextBaselineStyle = typeof textBaselineStyles[number];
/**
 * @value 'repeat' 水平竖直方向都重复
 * @value 'repeat-x' 水平方向重复
 * @value 'repeat-y' 垂直方向重复
 * @value 'no-repeat' 不重复
 */
declare type Repetition = typeof repetitions[number];
export interface CanvasContext {
    canvas?: Canvas;
    /**
     * 填充颜色
     */
    fillStyle: string;
    /**
     * 当前字体样式的属性。符合 CSS font 语法 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif
     */
    font: string;
    /**
     * 全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明
     */
    globalAlpha: number;
    /**
     * 在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 fill 填充块的合成，用于 stroke 线段的合成效果都是 source-over
     */
    globalCompositeOperation: GlobalCompositeOperation;
    /**
     * 线条的端点样式
     */
    lineCap: LineCapStyle;
    /**
     * 虚线偏移量，初始值为 0
     */
    lineDashOffset: number;
    /**
     * 线条的交点样式
     */
    lineJoin: LineJoinStyle;
    /**
     * 线条的宽度
     */
    lineWidth: number;
    /**
     * 最大斜接长度
     */
    miterLimit: number;
    /**
     * 阴影的模糊级别
     */
    shadowBlur: number;
    /**
     * 阴影的颜色
     */
    shadowColor: string;
    /**
     * 阴影相对于形状在水平方向的偏移
     */
    shadowOffsetX: number;
    /**
     * 阴影相对于形状在竖直方向的偏移
     */
    shadowOffsetY: number;
    /**
     * 边框颜色
     */
    strokeStyle: string;
    /**
     * 设置文字的对齐
     */
    textAlign: TextAlignStyle;
    /**
     * 设置文字的竖直对齐
     */
    textBaseline: TextBaselineStyle;
    /**
     * 创建一条弧线。
     * @param x 圆心的 x 坐标
     * @param y 圆心的 y 坐标
     * @param r 圆的半径
     * @param startAngle 起始弧度，单位弧度（在 3 点钟方向）
     * @param endAngle 终止弧度
     * @param counterclockwise 弧度的方向是否是逆时针
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // Draw coordinates
     * ctx.arc(100, 75, 50, 0, 2 * Math.PI);
     * ctx.fillStyle = '#EEEEEE';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.moveTo(40, 75);
     * ctx.lineTo(160, 75);
     * ctx.moveTo(100, 15);
     * ctx.lineTo(100, 135);
     * ctx.strokeStyle = '#AAAAAA';
     * ctx.stroke();
     *
     * ctx.font = '12px sans-serif';
     * ctx.fillStyle = '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.fillStyle = 'lightgreen';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(100, 25, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'blue';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(150, 75, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'red';
     * ctx.fill();
     *
     * // Draw arc
     * ctx.beginPath();
     * ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
     * ctx.strokeStyle = '#333333';
     * ctx.stroke();
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![Image](data:image/png;base64,)
     *
     * 针对 arc(100, 75, 50, 0, 1.5 * Math. PI)的三个关键坐标如下：
     *
     * * 绿色: 圆心 (100, 75)
     * * 红色: 起始弧度 (0)
     * * 蓝色: 终止弧度 (1.5 * Math. PI)
     */
    arc(x: number, y: number, r: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
    /**
     * 根据控制点和半径绘制圆弧路径。
     * @param x1 第一个控制点的 x 轴坐标
     * @param y1 第一个控制点的 y 轴坐标
     * @param x2 第二个控制点的 x 轴坐标
     * @param y2 第二个控制点的 y 轴坐标
     * @param radius 圆弧的半径
     */
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    /**
     * 开始创建一个路径。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * // begin path
     * ctx.rect(10, 10, 100, 30);
     * ctx.fillStyle = 'yellow';
     * ctx.fill();
     *
     * // begin another path
     * ctx.beginPath();
     * ctx.rect(10, 40, 100, 30);
     *
     * // only fill this rect, not in current path
     * ctx.fillStyle = 'blue';
     * ctx.fillRect(10, 70, 100, 30);
     *
     * ctx.rect(10, 100, 100, 30);
     *
     * // it will fill current path
     * ctx.fillStyle = 'red';
     * ctx.fill();
     * ctx.draw();
     *
     * ```
     *
     *
     * 开始创建一个路径。需要调用 `fill` 或者 `stroke` 才会使用路径进行填充或描边
     *
     * * 在最开始的时候相当于调用了一次 `beginPath` 。
     * * 同一个路径内的多次 `setFillStyle` 、 `setStrokeStyle` 、 `setLineWidth` 等设置，以最后一次设置为准。
     *
     * ![image](data:image/png;base64,)
     */
    beginPath(): void;
    /**
     * 创建三次方贝塞尔曲线路径。
     * @param cp1x 第一个贝塞尔控制点的 x 坐标
     * @param cp1y 第一个贝塞尔控制点的 y 坐标
     * @param cp2x 第二个贝塞尔控制点的 x 坐标
     * @param cp2y 第二个贝塞尔控制点的 y 坐标
     * @param x 结束点的 x 坐标
     * @param y 结束点的 y 坐标
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // Draw points
     * ctx.beginPath();
     * ctx.arc(20, 20, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'red';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(200, 20, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'lightgreen';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(20, 100, 2, 0, 2 * Math.PI);
     * ctx.arc(200, 100, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'blue';
     * ctx.fill();
     *
     * ctx.fillStyle = 'black';
     *
     * // Draw guides
     * ctx.beginPath();
     * ctx.moveTo(20, 20);
     * ctx.lineTo(20, 100);
     * ctx.lineTo(150, 75);
     *
     * ctx.moveTo(200, 20);
     * ctx.lineTo(200, 100);
     * ctx.lineTo(70, 75);
     * ctx.strokeStyle = '#AAAAAA';
     * ctx.stroke();
     *
     * // Draw quadratic curve
     * ctx.beginPath();
     * ctx.moveTo(20, 20);
     * ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
     * ctx.strokeStyle = 'black';
     * ctx.stroke();
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     *
     * 针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下：
     *
     * * 红色：起始点(20, 20)
     * * 蓝色：两个控制点(20, 100) (200, 100)
     * * 绿色：终止点(200, 20)
     */
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
    /**
     * 清除画布上在该矩形区域内的内容。
     * @param x 矩形路径左上角的横坐标
     * @param y 矩形路径左上角的纵坐标
     * @param width 矩形路径的宽度
     * @param height 矩形路径的高度
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.fillStyle = 'red';
     * ctx.fillRect(0, 0, 150, 200);
     * ctx.fillStyle = 'blue';
     * ctx.fillRect(150, 0, 150, 200);
     * ctx.clearRect(10, 10, 150, 75);
     * ctx.draw();
     *
     * ```
     *
     *
     * clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。
     *
     * ![image](data:image/png;base64,)
     */
    clearRect(x: number, y: number, width: number, height: number): void;
    /**
     * 从原始画布中剪切任意形状和尺寸。
     * 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
     * 可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过 restore 方法对其进行恢复。
     *
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ks.downloadFile({
     *     url: 'path/to/picture',
     *     success: function (res) {
     *         ctx.save();
     *         ctx.beginPath();
     *         ctx.arc(50, 50, 25, 0, 2 * Math.PI);
     *         ctx.clip();
     *         ctx.drawImage(res.tempFilePath, 25, 25);
     *         ctx.restore();
     *         ctx.draw();
     *     },
     * });
     *
     * ```
     *
     */
    clip(): void;
    /**
     * 关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * // 图 1
     * ctx.moveTo(10, 10);
     * ctx.lineTo(100, 10);
     * ctx.lineTo(100, 100);
     * ctx.closePath();
     * ctx.stroke();
     * ctx.draw();
     *
     * // 图 2
     * // begin path
     * ctx.rect(10, 10, 100, 30);
     * ctx.closePath();
     *
     * // begin another path
     * ctx.beginPath();
     * ctx.rect(10, 40, 100, 30);
     *
     * // only fill this rect, not in current path
     * ctx.fillStyle = 'blue';
     * ctx.fillRect(10, 70, 100, 30);
     *
     * ctx.rect(10, 100, 100, 30);
     *
     * // it will fill current path
     * ctx.fillStyle = 'red';
     * ctx.fill();
     * ctx.draw();
     *
     * ```
     *
     *
     * ### 图 1
     *
     * ![image](data:image/png;base64,)
     *
     * ### 图 2
     *
     * ![image](data:image/png;base64,)
     *
     */
    closePath(): void;
    /**
     * 对指定的图像创建模式的方法，可在指定的方向上重复源图像。
     * @param image 重复的图像源，支持代码包路径和本地临时路径 (本地路径)
     * @param repetition 如何重复图像
     * @returns 图像模式
     *
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * const pattern = ctx.createPattern('/path/to/image', 'repeat-x');
     * ctx.fillStyle = pattern;
     * ctx.fillRect(0, 0, 300, 150);
     * ctx.draw();
     *
     * ```
     *
     */
    createPattern(image: string, repetition: Repetition): ImagePattern;
    /**
     * 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
     * @param reserve 本次绘制是否保留上一次绘制的结果
     * @param callback 绘制完成后执行的回调函数
     * @example
     * ```javascript
     * // 图 1
     * // 第二次 draw() reserve 为 true。所以保留了上一次的绘制结果，在上下文设置的 fillStyle 'red' 也变成了默认的 'black'。
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ctx.fillStyle = 'red';
     * ctx.fillRect(10, 10, 150, 100);
     * ctx.draw();
     * ctx.fillRect(50, 50, 150, 100);
     * ctx.draw(true);
     *
     * // 图 2
     * // 第二次 draw() reserve 为 false。所以没有保留了上一次的绘制结果和在上下文设置的 fillStyle 'red'。
     * ctx.fillStyle = 'red';
     * ctx.fillRect(10, 10, 150, 100);
     * ctx.draw();
     * ctx.fillRect(50, 50, 150, 100);
     * ctx.draw();
     *
     * ```
     *
     *
     * ### 图 1
     *
     * ![image](data:image/png;base64,)
     *
     * ### 图 2
     *
     * ![image](data:image/png;base64,)
     *
     */
    draw(reserve?: boolean, callback?: () => void): void;
    /**
     * 绘制图像到画布。
     * @param imageResource 所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
     * @param dx imageResource 的左上角在目标 canvas 上 x 轴的位置
     * @param dy imageResource 的左上角在目标 canvas 上 y 轴的位置
     * @example
     * ```javascript
     * // 有三种用法
     * // drawImage(imageResource, dx, dy)
     * // drawImage(imageResource, dx, dy, dWidth, dHeight)
     * // drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
     *
     * const ctx = ks.createCanvasContext('myCanvas');
     * const res = await ks.chooseImage();
     * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    drawImage(imageResource: string, dx: number, dy: number): void;
    /**
     * @param imageResource 所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
     * @param dx imageResource 的左上角在目标 canvas 上 x 轴的位置
     * @param dy imageResource 的左上角在目标 canvas 上 y 轴的位置
     * @param dWidth 在目标画布上绘制 imageResource 的宽度，允许对绘制的 imageResource 进行缩放
     * @param dHeight 在目标画布上绘制 imageResource 的高度，允许对绘制的 imageResource 进行缩放
     *
     * @example
     * ```javascript
     * // 有三种用法
     * // drawImage(imageResource, dx, dy)
     * // drawImage(imageResource, dx, dy, dWidth, dHeight)
     * // drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
     *
     * const ctx = ks.createCanvasContext('myCanvas');
     * const res = await ks.chooseImage();
     * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
     * ctx.draw();
     *
     * ```
     *
     */
    drawImage(imageResource: string, dx: number, dy: number, dWidth: number, dHeight: number): void;
    /**
     * 绘制图像到画布。
     * @param imageResource 所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
     * @param sx 需要绘制到画布中的，imageResource 的矩形（裁剪）选择框的左上角 x 坐标
     * @param sy 需要绘制到画布中的，imageResource 的矩形（裁剪）选择框的左上角 y 坐标
     * @param sWidth 需要绘制到画布中的，imageResource 的矩形（裁剪）选择框的宽度
     * @param sHeight 需要绘制到画布中的，imageResource 的矩形（裁剪）选择框的高度
     * @param dx imageResource 的左上角在目标 canvas 上 x 轴的位置
     * @param dy imageResource 的左上角在目标 canvas 上 y 轴的位置
     * @param dWidth 在目标画布上绘制 imageResource 的宽度，允许对绘制的 imageResource 进行缩放
     * @param dHeight 在目标画布上绘制 imageResource 的高度，允许对绘制的 imageResource 进行缩放
     *
     * @example
     * ```javascript
     * // 有三种用法
     * // drawImage(imageResource, dx, dy)
     * // drawImage(imageResource, dx, dy, dWidth, dHeight)
     * // drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
     *
     * const ctx = ks.createCanvasContext('myCanvas');
     * const res = await ks.chooseImage();
     * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
     * ctx.draw();
     *
     * ```
     *
     */
    drawImage(imageResource: string, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void;
    /**
     * 对当前路径中的内容进行填充。默认的填充色为黑色。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // 图 1
     * ctx.moveTo(10, 10);
     * ctx.lineTo(100, 10);
     * ctx.lineTo(100, 100);
     * ctx.fill();
     * ctx.draw();
     *
     * // 图 2
     * // begin path
     * ctx.rect(10, 10, 100, 30);
     * ctx.fillStyle = 'yellow';
     * ctx.fill();
     *
     * // begin another path
     * ctx.beginPath();
     * ctx.rect(10, 40, 100, 30);
     *
     * // only fill this rect, not in current path
     * ctx.fillStyle = 'blue';
     * ctx.fillRect(10, 70, 100, 30);
     *
     * ctx.rect(10, 100, 100, 30);
     *
     * // it will fill current path
     * ctx.fillStyle = 'red';
     * ctx.fill();
     * ctx.draw();
     *
     * ```
     *
     *
     * fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。
     *
     * ### 图 1
     *
     * ![image](data:image/png;base64,)
     *
     * ### 图 2
     *
     * ![image](data:image/png;base64,)
     */
    fill(): void;
    /**
     * 用 `fillStyle` 设置的填充色 ，填充一个矩形。
     * @param x 矩形路径左上角的横坐标
     * @param y 矩形路径左上角的纵坐标
     * @param width 矩形路径的宽度
     * @param height 矩形路径的高度
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.setFillStyle('red');
     * ctx.fillRect(10, 10, 150, 75);
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    fillRect(x: number, y: number, width: number, height: number): void;
    /**
     * 在画布上绘制文本。
     * @param text 在画布上绘制的文本
     * @param x 绘制文本的左上角 x 坐标位置
     * @param y 绘制文本的左上角 y 坐标位置
     * @param maxWidth 需要绘制的最大宽度
     *
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ctx.setFontSize(20);
     * ctx.fillText('Hello', 20, 20);
     * ctx.fillText('MINA', 100, 100);
     *
     * ctx.draw();
     *
     * ```
     *
     */
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    /**
     * 增加一个新点，然后创建一条从上次指定点到目标点的线。
     * @param x 目标位置的 x 坐标
     * @param y 目标位置的 y 坐标
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.moveTo(10, 10);
     * ctx.rect(10, 10, 100, 50);
     * ctx.lineTo(110, 60);
     * ctx.stroke();
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    lineTo(x: number, y: number): void;
    /**
     * 测量文本尺寸信息。
     * @param text 要测量的文本
     *
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.font = 'italic bold 20px cursive';
     * const { width } = ctx.measureText('Hello World');
     *
     * ```
     *
     */
    measureText(text: string): TextMeasurement;
    /**
     * 把路径移动到画布中的指定点，不创建线条。
     * @param x 目标位置的 x 坐标
     * @param y 目标位置的 y 坐标
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.moveTo(10, 10);
     * ctx.lineTo(100, 10);
     *
     * ctx.moveTo(10, 50);
     * ctx.lineTo(100, 50);
     * ctx.stroke();
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    moveTo(x: number, y: number): void;
    /**
     * 创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
     * @param cpx 贝塞尔控制点的 x 坐标
     * @param cpy 贝塞尔控制点的 y 坐标
     * @param x 结束点的 x 坐标
     * @param y 结束点的 y 坐标
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // Draw points
     * ctx.beginPath();
     * ctx.arc(20, 20, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'red';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(200, 20, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'lightgreen';
     * ctx.fill();
     *
     * ctx.beginPath();
     * ctx.arc(20, 100, 2, 0, 2 * Math.PI);
     * ctx.fillStyle = 'blue';
     * ctx.fill();
     *
     * ctx.fillStyle = 'black';
     *
     * // Draw guides
     * ctx.beginPath();
     * ctx.moveTo(20, 20);
     * ctx.lineTo(20, 100);
     * ctx.lineTo(200, 20);
     * ctx.strokeStyle = '#AAAAAA';
     * ctx.stroke();
     *
     * // Draw quadratic curve
     * ctx.beginPath();
     * ctx.moveTo(20, 20);
     * ctx.quadraticCurveTo(20, 100, 200, 20);
     * ctx.strokeStyle = 'black';
     * ctx.stroke();
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     *
     * 针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) 的三个关键坐标如下：
     *
     * - 红色：起始点(20, 20)
     * - 蓝色：控制点(20, 100)
     * - 绿色：终止点(200, 20)
     */
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    /**
     * 创建一个矩形路径。
     * @param x 矩形路径左上角的横坐标
     * @param y 矩形路径左上角的纵坐标
     * @param width 矩形路径的宽度
     * @param height 矩形路径的高度
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.rect(10, 10, 150, 75);
     * ctx.fillStyle = 'red';
     * ctx.fill();
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    rect(x: number, y: number, width: number, height: number): void;
    /**
     * 恢复之前保存的绘图上下文。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // save the default fill style
     * ctx.save();
     * ctx.fillStyle = 'red';
     * ctx.fillRect(10, 10, 150, 100);
     *
     * // restore to the previous saved state
     * ctx.restore();
     * ctx.fillRect(50, 50, 150, 100);
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    restore(): void;
    /**
     * 以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。
     * @param angle 旋转弧度
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ctx.strokeRect(100, 10, 150, 100);
     * ctx.rotate((20 * Math.PI) / 180);
     * ctx.strokeRect(100, 10, 150, 100);
     * ctx.rotate((20 * Math.PI) / 180);
     * ctx.strokeRect(100, 10, 150, 100);
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    rotate(angle: number): void;
    /**
     * 保存绘图上下文。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // save the default fill style
     * ctx.save();
     * ctx.fillStyle = 'red';
     * ctx.fillRect(10, 10, 150, 100);
     *
     * // restore to the previous saved state
     * ctx.restore();
     * ctx.fillRect(50, 50, 150, 100);
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    save(): void;
    /**
     * 随后创建的路径的横纵坐标会被缩放。多次调用倍数会相乘。
     * @param x 横坐标缩放的倍数
     * @param y 纵坐标轴缩放的倍数
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ctx.strokeRect(10, 10, 25, 15);
     * ctx.scale(2, 2);
     * ctx.strokeRect(10, 10, 25, 15);
     * ctx.scale(2, 2);
     * ctx.strokeRect(10, 10, 25, 15);
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    scale(x: number, y: number): void;
    /**
     * 使用矩阵重新设置（覆盖）当前变换的方法。
     * @param scaleX 水平缩放
     * @param skewX 水平倾斜
     * @param skewY 垂直倾斜
     * @param scaleY 垂直缩放
     * @param translateX 水平移动
     * @param translateY 垂直移动
     */
    setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void;
    /**
     * 画出当前路径的边框。
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * // 图 1
     * ctx.moveTo(10, 10);
     * ctx.lineTo(100, 10);
     * ctx.lineTo(100, 100);
     * ctx.stroke();
     * ctx.draw();
     *
     * // 图 2
     * // stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。
     * // begin path
     * ctx.rect(10, 10, 100, 30);
     * ctx.strokeStyle = 'yellow';
     * ctx.stroke();
     *
     * // begin another path
     * ctx.beginPath();
     * ctx.rect(10, 40, 100, 30);
     *
     * // only stoke this rect, not in current path
     * ctx.strokeStyle = 'blue';
     * ctx.strokeRect(10, 70, 100, 30);
     *
     * ctx.rect(10, 100, 100, 30);
     *
     * // it will stroke current path
     * ctx.strokeStyle = 'red';
     * ctx.stroke();
     * ctx.draw();
     *
     * ```
     *
     *
     * ### 图 1
     *
     * ![image](data:image/png;base64,)
     *
     * ### 图 2
     *
     * ![image](data:image/png;base64,)
     */
    stroke(): void;
    /**
     * 用 `strokeStyle` 设置的线条色，画一个矩形(非填充)。
     * @param x 矩形路径左上角的横坐标
     * @param y 矩形路径左上角的纵坐标
     * @param width 矩形路径的宽度
     * @param height 矩形路径的高度
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.strokeStyle = 'red';
     * ctx.strokeRect(10, 10, 150, 75);
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    strokeRect(x: number, y: number, width: number, height: number): void;
    /**
     * 绘制文本描边。
     * @param text 要绘制的文本
     * @param x 文本起始点的 x 轴坐标
     * @param y 文本起始点的 y 轴坐标
     * @param maxWidth 需要绘制的最大宽度
     */
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    /**
     * 使用矩阵多次叠加当前变换的方法。
     * @param scaleX 水平缩放
     * @param skewX 水平倾斜
     * @param skewY 垂直倾斜
     * @param scaleY 垂直缩放
     * @param translateX 水平移动
     * @param translateY 垂直移动
     *
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     * ctx.transform(1, 1, 0, 1, 0, 0);
     * ctx.fillRect(0, 0, 100, 100);
     * ctx.draw();
     *
     * ```
     *
     */
    transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void;
    /**
     * 对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
     * @param x 水平坐标平移量
     * @param y 垂直坐标平移量
     * @example
     * ```javascript
     * const ctx = ks.createCanvasContext('myCanvas');
     *
     * ctx.strokeRect(10, 10, 150, 100);
     * ctx.translate(20, 20);
     * ctx.strokeRect(10, 10, 150, 100);
     * ctx.translate(20, 20);
     * ctx.strokeRect(10, 10, 150, 100);
     *
     * ctx.draw();
     *
     * ```
     *
     *
     * ![image](data:image/png;base64,)
     */
    translate(x: number, y: number): void;
    /**
     * 设置填充色。
     * @param fillStyle
     * @deprecated 请使用 `fillStyle` 代替
     */
    setFillStyle(fillStyle: string): void;
    /**
     * 设置字体的字号。
     * @param fontSize
     * @deprecated 请使用 `font` 代替
     */
    setFontSize(fontSize: number): void;
    /**
     * 设置全局画笔透明度。
     * @param alpha
     * @deprecated 请使用 `globalAlpha` 代替
     */
    setGlobalAlpha(alpha: number): void;
    /**
     * 设置线条的端点样式。
     * @param lineCap
     * @deprecated 请使用 `lineCap` 代替
     */
    setLineCap(lineCap: LineCapStyle): void;
    /**
     * 设置虚线样式。
     * @param pattern
     * @param offset
     * @deprecated 请使用 `lineDashOffset` 代替
     */
    setLineDash(_pattern: number[], offset: number): void;
    /**
     * 设置线条的交点样式。
     * @param lineJoin
     * @deprecated 请使用 `lineJoin` 代替
     */
    setLineJoin(lineJoin: LineJoinStyle): void;
    /**
     * 设置线条的宽度。
     * @param lineWidth
     * @deprecated 请使用 `lineWidth` 代替
     */
    setLineWidth(lineWidth: number): void;
    /**
     * 设置最大斜接长度。
     * @param miterLimit
     * @deprecated 请使用 `miterLimit` 代替
     */
    setMiterLimit(miterLimit: number): void;
    /**
     * 设置阴影样式。
     * @param offsetX
     * @param offsetY
     * @param blur
     * @param color
     * @deprecated 请使用 `shadowOffsetX` `shadowOffsetY` `shadowBlur` `shadowColor` 代替
     */
    setShadow(offsetX?: number, offsetY?: number, blur?: number, color?: string): void;
    /**
     * 设置描边颜色。
     * @param strokeStyle
     * @deprecated 请使用 `strokeStyle` 代替
     */
    setStrokeStyle(strokeStyle: string): void;
    /**
     * 设置文字的对齐。
     * @param textAlign
     * @deprecated 请使用 `textAlign` 代替
     */
    setTextAlign(textAlign: TextAlignStyle): void;
    /**
     * 设置文字的竖直对齐。
     * @param textBaseline
     * @deprecated 请使用 `textBaseline` 代替
     */
    setTextBaseline(textBaseline: TextBaselineStyle): void;
}
export {};