画布

qh.createCanvasContext

进行绘图上下文的创建

方法参数：String canvasId

canvasId参数说明：要获取 canvas 组件的 id。

返回值：CanvasContext

qh.canvasGetImageData

返回一个数组，用来描述 canvas 区域隐含的像素数据。

方法参数：Object object

object参数说明：

success返回参数说明：

示例：

• 在 html 文件中

<div>
    <canvas id="canvas"></canvas>
    <se-button type="primary" @click="canvasGetImageData">canvasGetImageData</button>
</div>

• 在 js 文件中

Page({
    onReady() {
        const ctx = qh.createCanvasContext('canvas');
        ctx.setFillStyle('#0f0f0f');
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.setStrokeStyle('#0000ff');
        ctx.moveTo(90, 70);
        ctx.lineTo(70, 80);
        ctx.lineTo(90, 80);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.setStrokeStyle('#0000ff');
        ctx.moveTo(130, 70);
        ctx.lineTo(110, 80);
        ctx.lineTo(130, 80);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.setFillStyle('#00ff00');
        ctx.arc(100, 100, 20, 0, 1 * Math.PI);
        ctx.fill();
        ctx.setFillStyle('#00ff00');
        ctx.setFontSize(12);
        ctx.fillText('haha', 165, 78);
        ctx.moveTo(100, 50);
        ctx.setStrokeStyle('#00ff00');
        ctx.bezierCurveTo(100, 25, 75, 25, 50, 50);
        ctx.stroke();
        ctx.moveTo(100, 50);
        ctx.quadraticCurveTo(75, 25, 50, 50);
        ctx.stroke();
        ctx.draw();
    },
    methods: {
        canvasGetImageData() {
            qh.canvasGetImageData({
                canvasId: 'canvas',
                x: 0,
                y: 0,
                width: 100,
                height: 100,
                success(res) {
                    console.log('canvasGetImageData success', res);
                },
                fail: function (err) {
                    console.log('canvasGetImageData fail', err);
                }
            });
        }
    }
});

qh.canvasPutImageData

将像素数据绘制到画布的方法。

方法参数：Object object

object参数说明：

示例：

• 在 html 文件中

<div>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <se-button type="primary" @click="canvasPutImageData">canvasPutImageData</button>
</div>

• 在 js 文件中

Page({
    onReady() {
        const ctx = qh.createCanvasContext('canvas1');
        ctx.setFillStyle('#0f0f0f');
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.setStrokeStyle('#0000ff');
        ctx.moveTo(90, 70);
        ctx.lineTo(70, 80);
        ctx.lineTo(90, 80);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.setStrokeStyle('#0000ff');
        ctx.moveTo(130, 70);
        ctx.lineTo(110, 80);
        ctx.lineTo(130, 80);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.setFillStyle('#00ff00');
        ctx.arc(100, 100, 20, 0, 1 * Math.PI);
        ctx.fill();
        ctx.setFillStyle('#00ff00');
        ctx.setFontSize(12);
        ctx.fillText('haha', 165, 78);
        ctx.moveTo(100, 50);
        ctx.setStrokeStyle('#00ff00');
        ctx.bezierCurveTo(100, 25, 75, 25, 50, 50);
        ctx.stroke();
        ctx.moveTo(100, 50);
        ctx.quadraticCurveTo(75, 25, 50, 50);
        ctx.stroke();
        ctx.draw();
    },
    methods: {
        canvasPutImageData() {
            qh.canvasGetImageData({
                canvasId: 'canvas1',
                x: 0,
                y: 0,
                width: 200,
                height: 200,
                success(res) {
                    qh.canvasPutImageData({
                        canvasId: 'canvas2',
                        x: 0,
                        y: 0,
                        width: 200,
                        height: 200,
                        data: res.data,
                        success(res) {
                            console.log('canvasPutImageData success', res);
                        },
                        fail: function (err) {
                            console.log('canvasPutImageData fail', err);
                        }
                    })
                },
                fail: function (err) {
                    console.log('canvasGetImageData fail', err);
                }
            });
        }
    }
});

qh.canvasToTempFilePath

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

方法参数：Object object

object参数说明：

说明：

在 draw 回调里调用该方法才能保证图片导出成功。

示例：

qh.canvasToTempFilePath({
    x: 100,
    y: 200,
    width: 50,
    height: 50,
    destWidth: 100,
    destHeight: 100,
    canvasId: 'myCanvas',
    success: function(res) {
        console.log(res.tempFilePath)
    }
});

CanvasContext

绘图上下文。

属性

string fillStyle 填充颜色。用法同 CanvasContext.setFillStyle()

string strokeStyle 边框颜色。用法同 CanvasContext.setStrokeStyle()

number shadowOffsetX 阴影相对于形状在水平方向的偏移

number shadowOffsetY 阴影相对于形状在竖直方向的偏移

number shadowColor 阴影的颜色

number shadowBlur 阴影的模糊级别

number lineWidth 线条的宽度。用法同 CanvasContext.setLineWidth()

string lineCap 线条的端点样式。用法同 CanvasContext.setLineCap()

string lineJoin 线条的交点样式。用法同 CanvasContext.setLineJoin()

lineJoin 的合法值

number miterLimit 最大斜接长度。用法同 CanvasContext.setMiterLimit()

number lineDashOffset 虚线偏移量，初始值为0

string font 当前字体样式的属性。符合 CSS font 语法 的 DOMString 字符串，至少需要提供字体大小和字体族名。默认值为 10px sans-serif

number globalAlpha 全局画笔透明度。范围 0-1，0 表示完全透明，1 表示完全不透明

CanvasContext.arc

画一条弧线。

方法参数：Number x, Number y, Number r, Number sAngle, Number eAngle, Boolean counterclockwise

x参数说明：圆的 x 坐标

y参数说明：圆的 y 坐标

r参数说明：圆的半径

sAngle参数说明：起始弧度，单位弧度（在3点钟方向)

eAngle参数说明：终止弧度

counterclockwise参数说明：可选。指定弧度的方向是逆时针还是顺时针。默认是 false，即顺时针。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();

CanvasContext.beginPath

开始创建一个路径，需要调用 fill 或者 stroke 才会使用路径进行填充或描边。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.rect(10, 10, 100, 30);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.rect(10, 40, 100, 30);
ctx.setFillStyle('blue');
ctx.fillRect(10, 70, 100, 30);
ctx.rect(10, 100, 100, 30);
ctx.setFillStyle('green');
ctx.fill();
ctx.draw();

CanvasContext.bezierCurveTo

创建三次方贝塞尔曲线路径。

方法参数：Number cp1x, Number cp1y, Number cp2, Number cp2y, Number x, Number y

cp1x参数说明：第一个贝塞尔控制点的 x 坐标

cp1y参数说明：第一个贝塞尔控制点的 y 坐标

cp2x参数说明：第二个贝塞尔控制点的 x 坐标

cp2y参数说明：第二个贝塞尔控制点的 y 坐标

x参数说明：结束点的 x 坐标

y参数说明：结束点的 y 坐标

示例：

const ctx = qh.createCanvasContext('myCanvas');
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();

CanvasContext.clearRect

清除画布上在该矩形区域内的内容。

方法参数：Number x, Number y, Number width, Number height

x参数说明：矩形路径左上角的 x 坐标。

y参数说明：矩形路径左上角的 y 坐标。

width参数说明：矩形路径的宽度。

height参数说明：矩形路径的高度。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 150, 200);
ctx.setFillStyle('blue');
ctx.fillRect(150, 0, 150, 200);
ctx.clearRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.clip

clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 “restore()” 方法）。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas')
qh.downloadFile({
    url: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/LOGO300x300.jpg',
    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()
    }
});

CanvasContext.closePath

关闭一个路径。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.moveTo(100, 100);
ctx.lineTo(10, 100);
ctx.lineTo(10, 10);
ctx.closePath();
ctx.stroke();
ctx.draw();

CanvasContext.createLinearGradient

创建一个线性的渐变颜色。

方法参数：Number x0，Number y0，Number x1，Number y1

x0参数说明：起点的 x 坐标

y0参数说明：起点的 y 坐标

x1参数说明：阴影的模糊级别，数值越大越模糊。

y1参数说明：阴影的颜色

示例：

const ctx = qh.createCanvasContext('myCanvas');
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'red');
// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();

CanvasContext.createCircularGradient

创建一个圆形的渐变颜色。

方法参数：Number x，Number y，Number z

x参数说明：圆心的 x 坐标

y参数说明：圆心的 y 坐标

z参数说明：圆的半径

示例：

const ctx = qh.createCanvasContext('myCanvas');

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');

// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();

CanvasContext.createPattern

对指定的图像创建模式的方法，可在指定的方向上重复元图像。

方法参数：String image, String repetitio

image参数说明： 重复的图像源，仅支持包内路径和临时路径 。

repetition参数说明： 指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat。

示例：

CanvasContext.createPattern(image, repetition);

示例：

const ctx = qh.createCanvasContext('myCanvas');
const pattern = ctx.createPattern('/path/to/image', 'repeat-x');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 150);
ctx.draw();

CanvasContext.draw

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

方法参数：Boolean reserve, Function callback

reserve参数说明： 非必填。本次绘制是否接着上一次绘制，即 reserve 参数为 false，则在本次调用 drawCanvas 绘制之前 native 层应先清空画布再继续绘制；若 reserver 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。

callback参数说明：绘制完成后回调

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);
ctx.draw();
ctx.fillRect(30, 30, 150, 100);
ctx.draw(true, function(){
  console.log('绘制完成')
});

CanvasContext.drawImage

使用顺序：drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight)

绘制图像到画布。

方法参数：String imageResource, Number dx, Number dy, Number dWidth, Number dHeight, Number sx, Number sy, Number sWidth, Number sHeight

imageResource参数说明： 所要绘制的图片资源 。

dx参数说明： 图像的左上角在目标 canvas 上 X 轴的位置。

dy参数说明： 图像的左上角在目标 canvas 上 Y 轴的位置 。

dWidth参数说明： 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 。

dHeight参数说明： 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 。

sx参数说明： 源图像的矩形选择框的左上角 X 坐标。

sy参数说明： 源图像的矩形选择框的左上角 Y 坐标。

sWidth参数说明： 源图像的矩形选择框的宽度 。

sHeight参数说明： 源图像的矩形选择框的高度 。

示例：

const ctx = qh.createCanvasContext('myCanvas');

qh.chooseImage({
    success: function(res){
        ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
        ctx.draw();
    };
});

CanvasContext.fill

对当前路径中的内容进行填充。默认的填充色为黑色。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.moveTo(100, 100);
ctx.lineTo(10, 100);
ctx.lineTo(10, 10);
ctx.fill();
ctx.draw();

CanvasContext.fillRect

填充一个矩形。

方法参数：Number x, Number y,Number width, Number height

x参数说明：矩形路径左上角的 x 坐标。

y参数说明：矩形路径左上角的 y 坐标。

width参数说明：矩形路径的宽度。

height参数说明：矩形路径的高度。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.fillText

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

方法参数：String text, Number x, Number y, Number maxWidth

text参数说明： 在画布上输出的文本。 x参数说明：绘制文本的左上角 x 坐标位置。 y参数说明： 绘制文本的左上角 y 坐标位置。 maxWidth 参数说明：| 需要绘制的最大宽度（可选 ）。

示例：

const ctx = qh.createCanvasContext('myCanvas');

ctx.setFontSize(20);
ctx.fillText('Hello', 20, 20);
ctx.fillText('World', 100, 100);

ctx.draw();

CanvasContext.lineTo

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

方法参数：Number x, Number y

x参数说明：目标位置的 x 坐标

y参数说明：目标位置的 y 坐标

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.rect(10, 10, 100, 50);
ctx.lineTo(110, 60);
ctx.stroke();
ctx.draw();

CanvasContext.measureText

测量文本尺寸信息，目前仅返回文本宽度，同步接口。

方法参数：String text

text参数说明：要测量的文本

返回：

返回 TextMetrics 对象，结构如下：

示例：

const ctx = qh.createCanvasContext('myCanvas')
ctx.font = 'italic bold 20px cursive'
const metrics = ctx.measureText('Hello World')
console.log(metrics.width);

CanvasContext.moveTo

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

方法参数：Number x, Number y

x参数说明：目标位置的 x 坐标

y参数说明：目标位置的 y 坐标

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.moveTo(10, 100);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.draw();

CanvasContext.quadraticCurveTo

创建二次贝塞尔曲线路径。

方法参数：Number cpx, Number cpy, Number x, Number y

cpx参数说明：贝塞尔控制点的 x 坐标

cpy参数说明：贝塞尔控制点的 y 坐标

x参数说明：结束点的 x 坐标

y参数说明：结束点的 y 坐标

示例：

const ctx = qh.createCanvasContext('myCanvas');
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.setStrokeStyle('blue');
ctx.stroke();

ctx.draw();

CanvasContext.rect

创建一个矩形。

方法参数：Number x, Number y, Number width, Number height

x参数说明：矩形路径左上角的 x 坐标。

y参数说明：矩形路径左上角的 y 坐标。

width参数说明：矩形路径的宽度。

height参数说明：矩形路径的高度。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.rect(30, 30, 150, 75);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();

CanvasContext.restore

恢复之前保存的绘图上下文。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);

// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);

ctx.draw();

CanvasContext.rotate

以原点为中心，原点可以用 translate 方法修改。顺时针旋转当前坐标轴。多次调用 rotate，旋转的角度会叠加。

方法参数：Number rotate

rotate 参数说明：旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360)。

示例：

const ctx = qh.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();

CanvasContext.save

保存当前的绘图上下文。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);

// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);

ctx.draw();

CanvasContext.scale

在调用scale方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。

方法参数：Number scaleWidth, Number scaleHeight

scaleWidth参数说明：横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) 。

scaleHeigh参数说明：纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)。

示例：

const ctx = qh.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();

CanvasContext.setFillStyle

设置填充色。

方法参数： Color color

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.setFontSize

设置字体的字号。

方法参数：Number fontSize

fontSize参数说明：字体的字号

示例：

const ctx = qh.createCanvasContext('myCanvas');

ctx.setFontSize(20);
ctx.fillText('20', 20, 20);
ctx.setFontSize(30);
ctx.fillText('30', 40, 40);
ctx.draw();

CanvasContext.setGlobalAlpha

设置全局画笔透明度。

方法参数： Number alpha

alpha 参数说明： 透明度取值范围： 0~1 ，0 表示完全透明，1 表示完全不透明。

示例：

const ctx = qh.createCanvasContext('myCanvas');

ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
ctx.setGlobalAlpha(0.2);
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 150, 100);
ctx.setFillStyle('yellow');
ctx.fillRect(100, 100, 150, 100);

ctx.draw();

CanvasContext.setLineCap

设置线条的端点样式。

方法参数：String lineCap

lineCap参数说明：取值范围：'butt'、'round'、'square', 线条的结束端点样式。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.lineTo(200, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(50, 30);
ctx.lineTo(200, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(10);
ctx.moveTo(70, 50);
ctx.lineTo(200, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(90, 70);
ctx.lineTo(200, 70);
ctx.stroke();

ctx.draw();

CanvasContext.setLineDash

设置线条虚线样式的间距和长度。

方法参数：Array pattern, Number offset

pattern参数说明：一组描述交替绘制线段和间距（坐标空间单位）长度的数字。

offset参数说明：虚线偏移量。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setLineDash([10, 20], 5);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw();

设置虚线偏移量的属性。

方法参数：Number value

value参数说明： 偏移量，初始值为 0 。

示例：

CanvasContext.setLineDashOffset = value;

CanvasContext.setLineJoin

设置线条的交点样式。

方法参数：String lineJoin

lineJoin参数说明：取值范围：'bevel'、'round'、'miter'， 线条的结束交点样式。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(10);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(10);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(10);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();

ctx.draw();

CanvasContext.setLineWidth

设置线条的宽度。

方法参数：Number lineWidth

lineWidth参数说明：线条的宽度(单位是 px)

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.lineTo(200, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(5);
ctx.moveTo(50, 30);
ctx.lineTo(200, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(70, 50);
ctx.lineTo(200, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(15);
ctx.moveTo(90, 70);
ctx.lineTo(200, 70);
ctx.stroke();

ctx.draw();

CanvasContext.setMiterLimit

设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离，当 setLineJoin() 为 miter 时才有效，超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

方法参数： Number miterLimit

miterLimit参数说明:最大斜接长度

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(4);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();

ctx.draw();

CanvasContext.setShadow

使用顺序：setShadow(offsetX, offsetY, blur, color)

设置阴影样式。

方法参数：Number offsetX, Number offsetY, Number blur, String|CanvasGradient color

offsetX参数说明：阴影相对于形状在水平方向的偏移。

offsetY参数说明：阴影相对于形状在竖直方向的偏移。

blur参数说明：阴影的模糊级别，数值越大越模糊，范围：0 ~ 100。

color参数说明：阴影的颜色。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.setShadow(10, 50, 50, 'red');
ctx.fillRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.setStrokeStyle

设置边框颜色。

方法参数： String|CanvasGradient color

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.setTextAlign

用于设置文字的对齐。

方法参数：String align

align参数说明： 可选值 'left'、'center'、'right'。

示例：

const ctx = qh.createCanvasContext('myCanvas');

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

CanvasContext.setTextBaseline

用于设置文字的水平对齐。

方法参数：String textBaseline

textBaseline参数说明：可选值 'top'、'bottom'、'middle'、'normal' 。

示例：

const ctx = qh.createCanvasContext('myCanvas');

ctx.setStrokeStyle('red');
ctx.moveTo(5, 75);
ctx.lineTo(295, 75);
ctx.stroke();

ctx.setFontSize(20);

ctx.setTextBaseline('top');
ctx.fillText('top', 5, 75);

ctx.setTextBaseline('middle');
ctx.fillText('middle', 50, 75);

ctx.setTextBaseline('bottom');
ctx.fillText('bottom', 120, 75);

ctx.setTextBaseline('normal');
ctx.fillText('normal', 200, 75);

ctx.draw();

CanvasContext.setTransform

使用矩阵重新设置（覆盖）当前变换的方法。

方法参数：Number scaleX, Number scaleY, Number skewX, Number skewY, Number translateX, Number translateY

scaleX参数说明： 水平缩放

scaleY参数说明： 垂直缩放

skewX参数说明： 水平倾斜

skewY参数说明：垂直倾斜

translateX参数说明：水平移动

translateY参数说明：垂直移动

示例：

CanvasContext.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

CanvasContext.stroke

画出当前路径的边框。默认颜色为黑色。

方法参数：无

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.moveTo(100, 100);
ctx.lineTo(10, 100);
ctx.lineTo(10, 10);
ctx.stroke();
ctx.draw();

CanvasContext.strokeRect

画一个矩形(非填充)。

方法参数：Number x, Number y, Number width, Number height

x参数说明：矩形路径左上角的 x 坐标。

y参数说明：矩形路径左上角的 y 坐标。

width参数说明：矩形路径的宽度。

height参数说明：矩形路径的高度。

示例：

const ctx = qh.createCanvasContext('myCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(30, 30, 150, 75);
ctx.draw();

CanvasContext.strokeText

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

方法参数：String text, Number x, Number y, Number maxWidth

text参数说明：要绘制的文本

x参数说明：文本起始点的 x 轴坐标

y参数说明：文本起始点的 y 轴坐标

maxWidth参数说明：需要绘制的最大宽度，可选。

示例：

CanvasContext.strokeText(text, x, y, maxWidth);

CanvasContext.transform

对当前坐标系的原点 (0, 0) 进行变换，默认的坐标系原点为页面左上角。

方法参数：Number scaleX, Number scaleY, Number skewX, Number skewY, Number translateX, Number translateY

scaleX参数说明：水平缩放

scaleY参数说明：垂直缩放

skewX参数说明：水平倾斜

skewY参数说明：垂直倾斜

translateX参数说明：水平移动

translateY参数说明：垂直移动

示例：

const ctx = qh.createCanvasContext('myCanvas');

ctx.strokeRect(10, 10, 150, 100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.draw();

CanvasContext.translate

对当前坐标系的原点 (0, 0) 进行变换，默认的坐标系原点为页面左上角。

方法参数：Number x, Number y

x参数说明：水平坐标平移量

y参数说明：竖直坐标平移量

示例：

const ctx = qh.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();

CanvasGradient.addColorStop

创建一个颜色的渐变点。

方法参数：Number stop, String|CanvasGradient color

stop参数说明：表示渐变点在起点和终点中的位置，取值(0-1)。

color参数说明:渐变点的颜色

示例：

const ctx = qh.createCanvasContext('myCanvas');

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10);
grd.addColorStop(0, 'red');
grd.addColorStop(0.16, 'orange');
grd.addColorStop(0.33, 'yellow');
grd.addColorStop(0.5, 'green');
grd.addColorStop(0.66, 'cyan');
grd.addColorStop(0.83, 'blue');
grd.addColorStop(1, 'purple');

// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();