1 | import Taro from '../../index'
|
2 |
|
3 | declare module '../../index' {
|
4 | namespace canvasToTempFilePath {
|
5 | interface Option {
|
6 | /** 画布标识,传入 [canvas](/docs/components/canvas) 组件实例 (canvas type="2d" 时使用该属性)。 */
|
7 | canvas?: CanvasProps
|
8 | /** 画布标识,传入 [canvas](/docs/components/canvas) 组件的 canvas-id */
|
9 | canvasId?: string
|
10 | /** 图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。 */
|
11 | quality?: number
|
12 | /** 接口调用结束的回调函数(调用成功、失败都会执行) */
|
13 | complete?: (res: TaroGeneral.CallbackResult) => void
|
14 | /** 输出的图片的高度 */
|
15 | destHeight?: number
|
16 | /** 输出的图片的宽度 */
|
17 | destWidth?: number
|
18 | /** 接口调用失败的回调函数 */
|
19 | fail?: (res: TaroGeneral.CallbackResult) => void
|
20 | /** 目标文件的类型
|
21 | * @default "png"
|
22 | */
|
23 | fileType?: keyof FileType
|
24 | /** 指定的画布区域的高度 */
|
25 | height?: number
|
26 | /** 接口调用成功的回调函数 */
|
27 | success?: (result: SuccessCallbackResult) => void
|
28 | /** 指定的画布区域的宽度 */
|
29 | width?: number
|
30 | /** 指定的画布区域的左上角横坐标 */
|
31 | x?: number
|
32 | /** 指定的画布区域的左上角纵坐标 */
|
33 | y?: number
|
34 | }
|
35 | interface SuccessCallbackResult extends TaroGeneral.CallbackResult {
|
36 | /** 生成文件的临时路径 */
|
37 | tempFilePath: string
|
38 | /** 调用结果 */
|
39 | errMsg: string
|
40 | }
|
41 | interface FileType {
|
42 | /** jpg 图片 */
|
43 | jpg
|
44 | /** png 图片 */
|
45 | png
|
46 | }
|
47 | interface CanvasProps {
|
48 | /** 指定 canvas 类型,支持 2d 和 webgl */
|
49 | type?: string
|
50 | /** canvas 组件的唯一标识符,若指定了 type 则无需再指定该属性 */
|
51 | canvasId?: string
|
52 | /** 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
|
53 | * @default false
|
54 | */
|
55 | disableScroll?: boolean
|
56 | /** 手指触摸动作开始 */
|
57 | onTouchStart?: TaroGeneral.CommonEventFunction
|
58 | /** 手指触摸后移动 */
|
59 | onTouchMove?: TaroGeneral.CommonEventFunction
|
60 | /** 手指触摸动作结束 */
|
61 | onTouchEnd?: TaroGeneral.CommonEventFunction
|
62 | /** 手指触摸动作被打断,如来电提醒,弹窗 */
|
63 | onTouchCancel?: TaroGeneral.CommonEventFunction
|
64 | /** 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 */
|
65 | onLongTap?: TaroGeneral.CommonEventFunction
|
66 | /** 当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'} */
|
67 | onError?: TaroGeneral.CommonEventFunction<CanvasProps.onErrorEventDetail>
|
68 | }
|
69 |
|
70 | namespace CanvasProps {
|
71 | interface onErrorEventDetail {
|
72 | errMsg: string
|
73 | }
|
74 | }
|
75 | }
|
76 | namespace canvasPutImageData {
|
77 | interface Option {
|
78 | /** 画布标识,传入 [canvas](/docs/components/canvas) 组件的 canvas-id 属性。 */
|
79 | canvasId: string
|
80 | /** 图像像素点数据,一维数组,每四项表示一个像素点的 rgba */
|
81 | data: Uint8ClampedArray
|
82 | /** 源图像数据矩形区域的高度 */
|
83 | height: number
|
84 | /** 源图像数据矩形区域的宽度 */
|
85 | width: number
|
86 | /** 源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量) */
|
87 | x: number
|
88 | /** 源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量) */
|
89 | y: number
|
90 | /** 接口调用结束的回调函数(调用成功、失败都会执行) */
|
91 | complete?: (res: TaroGeneral.CallbackResult) => void
|
92 | /** 接口调用失败的回调函数 */
|
93 | fail?: (res: TaroGeneral.CallbackResult) => void
|
94 | /** 接口调用成功的回调函数 */
|
95 | success?: (res: TaroGeneral.CallbackResult) => void
|
96 | }
|
97 | }
|
98 | namespace canvasGetImageData {
|
99 | interface Option {
|
100 | /** 画布标识,传入 [canvas](/docs/components/canvas) 组件的 `canvas-id` 属性。 */
|
101 | canvasId: string
|
102 | /** 将要被提取的图像数据矩形区域的高度 */
|
103 | height: number
|
104 | /** 将要被提取的图像数据矩形区域的宽度 */
|
105 | width: number
|
106 | /** 将要被提取的图像数据矩形区域的左上角横坐标 */
|
107 | x: number
|
108 | /** 将要被提取的图像数据矩形区域的左上角纵坐标 */
|
109 | y: number
|
110 | /** 接口调用结束的回调函数(调用成功、失败都会执行) */
|
111 | complete?: (res: TaroGeneral.CallbackResult) => void
|
112 | /** 接口调用失败的回调函数 */
|
113 | fail?: (res: TaroGeneral.CallbackResult) => void
|
114 | /** 接口调用成功的回调函数 */
|
115 | success?: (result: SuccessCallbackResult) => void
|
116 | }
|
117 | interface SuccessCallbackResult extends TaroGeneral.CallbackResult {
|
118 | /** 图像像素点数据,一维数组,每四项表示一个像素点的 rgba */
|
119 | data: Uint8ClampedArray
|
120 | /** 图像数据矩形的高度 */
|
121 | height: number
|
122 | /** 图像数据矩形的宽度 */
|
123 | width: number
|
124 | /** 调用结果 */
|
125 | errMsg: string
|
126 | }
|
127 | }
|
128 |
|
129 | /** Canvas 实例,可通过 SelectorQuery 获取。
|
130 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html
|
131 | */
|
132 | interface Canvas {
|
133 | /** 画布高度 */
|
134 | height: number
|
135 | /** 画布宽度 */
|
136 | width: number
|
137 | /** 取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
|
138 | * @supported weapp
|
139 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.cancelAnimationFrame.html
|
140 | */
|
141 | cancelAnimationFrame(requestID: number): void
|
142 | /** 创建一个 ImageData 对象。仅支持在 2D Canvas 中使用。
|
143 | * @supported weapp
|
144 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImageData.html
|
145 | */
|
146 | createImageData(): ImageData
|
147 | /** 创建一个图片对象。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
|
148 | * @supported weapp
|
149 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html
|
150 | */
|
151 | createImage(): Image
|
152 | /** 创建 Path2D 对象
|
153 | * @supported weapp
|
154 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html
|
155 | */
|
156 | createPath2D(
|
157 | path: Path2D
|
158 | ): Path2D
|
159 | /** 支持获取 2D 和 WebGL 绘图上下文
|
160 | * @supported weapp
|
161 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.getContext.html
|
162 | */
|
163 | getContext(contextType: string): RenderingContext
|
164 | /** 在下次进行重绘时执行。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
|
165 | * @supported weapp
|
166 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame.html
|
167 | */
|
168 | requestAnimationFrame(
|
169 | /** 执行的 callback */
|
170 | callback: (...args: any[]) => any,
|
171 | ): number
|
172 | /** 返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。
|
173 | * @supported weapp
|
174 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.toDataURL.html
|
175 | */
|
176 | toDataURL(
|
177 | /** 图片格式,默认为 image/png */
|
178 | type: string,
|
179 | /** 在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。 */
|
180 | encoderOptions: number
|
181 | ): string
|
182 | }
|
183 |
|
184 | /** canvas 组件的绘图上下文
|
185 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html
|
186 | */
|
187 | interface CanvasContext {
|
188 | /** 填充颜色。用法同 [CanvasContext.setFillStyle()]。 */
|
189 | fillStyle: string
|
190 | /** 边框颜色。用法同 [CanvasContext.setFillStyle()]。 */
|
191 | strokeStyle: string
|
192 | /** 阴影相对于形状在水平方向的偏移 */
|
193 | shadowOffsetX: number
|
194 | /** 阴影相对于形状在竖直方向的偏移 */
|
195 | shadowOffsetY: number
|
196 | /** 阴影的模糊级别 */
|
197 | shadowBlur: number
|
198 | /** 阴影的颜色 */
|
199 | shadowColor: string
|
200 | /** 线条的宽度。用法同 [CanvasContext.setLineWidth()]。 */
|
201 | lineWidth: number
|
202 | /** 线条的端点样式。用法同 [CanvasContext.setLineCap()]。 */
|
203 | lineCap: keyof CanvasContext.LineCap
|
204 | /** 线条的交点样式。用法同 [CanvasContext.setLineJoin()]。 */
|
205 | lineJoin: keyof CanvasContext.LineJoin
|
206 | /** 最大斜接长度。用法同 [CanvasContext.setMiterLimit()]。 */
|
207 | miterLimit: number
|
208 | /** 虚线偏移量,初始值为0 */
|
209 | lineDashOffset: number
|
210 | /** 当前字体样式的属性。符合 [CSS font 语法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) 的 DOMString 字符串,至少需要提供字体大小和字体族名。默认值为 10px sans-serif。 */
|
211 | font: string
|
212 | /** 全局画笔透明度。范围 0-1,0 表示完全透明,1 表示完全不透明。 */
|
213 | globalAlpha: number
|
214 | /** 在绘制新形状时应用的合成操作的类型。目前安卓版本只适用于 `fill` 填充块的合成,用于 `stroke` 线段的合成效果都是 `source-over`。
|
215 | *
|
216 | * 目前支持的操作有
|
217 | * - 安卓:xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
|
218 | * - iOS:xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity */
|
219 | globalCompositeOperation: string
|
220 | /** 创建一条弧线。
|
221 | *
|
222 | * - 创建一个圆可以指定起始弧度为 0,终止弧度为 2 * Math.PI。
|
223 | * - 用 `stroke` 或者 `fill` 方法来在 `canvas` 中画弧线。
|
224 | *
|
225 | * 针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下:
|
226 | *
|
227 | * - 绿色: 圆心 (100, 75)
|
228 | * - 红色: 起始弧度 (0)
|
229 | * - 蓝色: 终止弧度 (1.5 * Math.PI)
|
230 | * @supported weapp
|
231 | * @example
|
232 | * ```tsx
|
233 | * const ctx = Taro.createCanvasContext('myCanvas')
|
234 | * // Draw coordinates
|
235 | * ctx.arc(100, 75, 50, 0, 2 * Math.PI)
|
236 | * ctx.setFillStyle('#EEEEEE')
|
237 | * ctx.fill()
|
238 | * ctx.beginPath()
|
239 | * ctx.moveTo(40, 75)
|
240 | * ctx.lineTo(160, 75)
|
241 | * ctx.moveTo(100, 15)
|
242 | * ctx.lineTo(100, 135)
|
243 | * ctx.setStrokeStyle('#AAAAAA')
|
244 | * ctx.stroke()
|
245 | * ctx.setFontSize(12)
|
246 | * ctx.setFillStyle('black')
|
247 | * ctx.fillText('0', 165, 78)
|
248 | * ctx.fillText('0.5*PI', 83, 145)
|
249 | * ctx.fillText('1*PI', 15, 78)
|
250 | * ctx.fillText('1.5*PI', 83, 10)
|
251 | * // Draw points
|
252 | * ctx.beginPath()
|
253 | * ctx.arc(100, 75, 2, 0, 2 * Math.PI)
|
254 | * ctx.setFillStyle('lightgreen')
|
255 | * ctx.fill()
|
256 | * ctx.beginPath()
|
257 | * ctx.arc(100, 25, 2, 0, 2 * Math.PI)
|
258 | * ctx.setFillStyle('blue')
|
259 | * ctx.fill()
|
260 | * ctx.beginPath()
|
261 | * ctx.arc(150, 75, 2, 0, 2 * Math.PI)
|
262 | * ctx.setFillStyle('red')
|
263 | * ctx.fill()
|
264 | * // Draw arc
|
265 | * ctx.beginPath()
|
266 | * ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)
|
267 | * ctx.setStrokeStyle('#333333')
|
268 | * ctx.stroke()
|
269 | * ctx.draw()
|
270 | * ```
|
271 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arc.html
|
272 | */
|
273 | arc(
|
274 | /** 圆心的 x 坐标 */
|
275 | x: number,
|
276 | /** 圆心的 y 坐标 */
|
277 | y: number,
|
278 | /** 圆的半径 */
|
279 | r: number,
|
280 | /** 起始弧度,单位弧度(在3点钟方向) */
|
281 | sAngle: number,
|
282 | /** 终止弧度 */
|
283 | eAngle: number,
|
284 | /** 弧度的方向是否是逆时针 */
|
285 | counterclockwise?: boolean,
|
286 | ): void
|
287 | /** 根据控制点和半径绘制圆弧路径。
|
288 | * @supported weapp
|
289 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arcTo.html
|
290 | */
|
291 | arcTo(
|
292 | /** 第一个控制点的 x 轴坐标 */
|
293 | x1: number,
|
294 | /** 第一个控制点的 y 轴坐标 */
|
295 | y1: number,
|
296 | /** 第二个控制点的 x 轴坐标 */
|
297 | x2: number,
|
298 | /** 第二个控制点的 y 轴坐标 */
|
299 | y2: number,
|
300 | /** 圆弧的半径 */
|
301 | radius: number,
|
302 | ): void
|
303 | /** 开始创建一个路径。需要调用 `fill` 或者 `stroke` 才会使用路径进行填充或描边
|
304 | *
|
305 | * - 在最开始的时候相当于调用了一次 `beginPath`。
|
306 | * - 同一个路径内的多次 `setFillStyle`、`setStrokeStyle`、`setLineWidth`等设置,以最后一次设置为准。
|
307 | * @supported weapp
|
308 | * @example
|
309 | * ```tsx
|
310 | * const ctx = Taro.createCanvasContext('myCanvas')
|
311 | * // begin path
|
312 | * ctx.rect(10, 10, 100, 30)
|
313 | * ctx.setFillStyle('yellow')
|
314 | * ctx.fill()
|
315 | * // begin another path
|
316 | * ctx.beginPath()
|
317 | * ctx.rect(10, 40, 100, 30)
|
318 | * // only fill this rect, not in current path
|
319 | * ctx.setFillStyle('blue')
|
320 | * ctx.fillRect(10, 70, 100, 30)
|
321 | * ctx.rect(10, 100, 100, 30)
|
322 | * // it will fill current path
|
323 | * ctx.setFillStyle('red')
|
324 | * ctx.fill()
|
325 | * ctx.draw()
|
326 | * ```
|
327 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.beginPath.html
|
328 | */
|
329 | beginPath(): void
|
330 | /** 创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。
|
331 | *
|
332 | * 针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下:
|
333 | *
|
334 | * - 红色:起始点(20, 20)
|
335 | * - 蓝色:两个控制点(20, 100) (200, 100)
|
336 | * - 绿色:终止点(200, 20)
|
337 | * @supported weapp
|
338 | * @example
|
339 | * ```tsx
|
340 | * const ctx = Taro.createCanvasContext('myCanvas')
|
341 | * // Draw points
|
342 | * ctx.beginPath()
|
343 | * ctx.arc(20, 20, 2, 0, 2 * Math.PI)
|
344 | * ctx.setFillStyle('red')
|
345 | * ctx.fill()
|
346 | * ctx.beginPath()
|
347 | * ctx.arc(200, 20, 2, 0, 2 * Math.PI)
|
348 | * ctx.setFillStyle('lightgreen')
|
349 | * ctx.fill()
|
350 | * ctx.beginPath()
|
351 | * ctx.arc(20, 100, 2, 0, 2 * Math.PI)
|
352 | * ctx.arc(200, 100, 2, 0, 2 * Math.PI)
|
353 | * ctx.setFillStyle('blue')
|
354 | * ctx.fill()
|
355 | * ctx.setFillStyle('black')
|
356 | * ctx.setFontSize(12)
|
357 | * // Draw guides
|
358 | * ctx.beginPath()
|
359 | * ctx.moveTo(20, 20)
|
360 | * ctx.lineTo(20, 100)
|
361 | * ctx.lineTo(150, 75)
|
362 | * ctx.moveTo(200, 20)
|
363 | * ctx.lineTo(200, 100)
|
364 | * ctx.lineTo(70, 75)
|
365 | * ctx.setStrokeStyle('#AAAAAA')
|
366 | * ctx.stroke()
|
367 | * // Draw quadratic curve
|
368 | * ctx.beginPath()
|
369 | * ctx.moveTo(20, 20)
|
370 | * ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
|
371 | * ctx.setStrokeStyle('black')
|
372 | * ctx.stroke()
|
373 | * ctx.draw()
|
374 | * ```
|
375 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.bezierCurveTo.html
|
376 | */
|
377 | bezierCurveTo(
|
378 | /** 第一个贝塞尔控制点的 x 坐标 */
|
379 | cp1x: number,
|
380 | /** 第一个贝塞尔控制点的 y 坐标 */
|
381 | cp1y: number,
|
382 | /** 第二个贝塞尔控制点的 x 坐标 */
|
383 | cp2x: number,
|
384 | /** 第二个贝塞尔控制点的 y 坐标 */
|
385 | cp2y: number,
|
386 | /** 结束点的 x 坐标 */
|
387 | x: number,
|
388 | /** 结束点的 y 坐标 */
|
389 | y: number,
|
390 | ): void
|
391 | /** 清除画布上在该矩形区域内的内容
|
392 | * @supported weapp
|
393 | * @example
|
394 | * clearRect 并非画一个白色的矩形在地址区域,而是清空,为了有直观感受,对 canvas 加了一层背景色。
|
395 | * ```html
|
396 | * <canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
|
397 | * ```
|
398 | * ```tsx
|
399 | * const ctx = Taro.createCanvasContext('myCanvas')
|
400 | * ctx.setFillStyle('red')
|
401 | * ctx.fillRect(0, 0, 150, 200)
|
402 | * ctx.setFillStyle('blue')
|
403 | * ctx.fillRect(150, 0, 150, 200)
|
404 | * ctx.clearRect(10, 10, 150, 75)
|
405 | * ctx.draw()
|
406 | * ```
|
407 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.clearRect.html
|
408 | */
|
409 | clearRect(
|
410 | /** 矩形路径左上角的横坐标 */
|
411 | x: number,
|
412 | /** 矩形路径左上角的纵坐标 */
|
413 | y: number,
|
414 | /** 矩形路径的宽度 */
|
415 | width: number,
|
416 | /** 矩形路径的高度 */
|
417 | height: number,
|
418 | ): void
|
419 | /** 从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 `clip` 方法前通过使用 `save` 方法对当前画布区域进行保存,并在以后的任意时间通过`restore`方法对其进行恢复。
|
420 | * @supported weapp
|
421 | * @example
|
422 | * ```tsx
|
423 | * const ctx = Taro.createCanvasContext('myCanvas')
|
424 | * Taro.downloadFile({
|
425 | * url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
|
426 | * success: function(res) {
|
427 | * ctx.save()
|
428 | * ctx.beginPath()
|
429 | * ctx.arc(50, 50, 25, 0, 2*Math.PI)
|
430 | * ctx.clip()
|
431 | * ctx.drawImage(res.tempFilePath, 25, 25)
|
432 | * ctx.restore()
|
433 | * ctx.draw()
|
434 | * }
|
435 | * })
|
436 | * ```
|
437 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.clip.html
|
438 | */
|
439 | clip(): void
|
440 | /** 关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 `fill` 或者 `stroke` 并开启了新的路径,那之前的路径将不会被渲染。
|
441 | * @supported weapp
|
442 | * @example
|
443 | * ```tsx
|
444 | * const ctx = Taro.createCanvasContext('myCanvas')
|
445 | * ctx.moveTo(10, 10)
|
446 | * ctx.lineTo(100, 10)
|
447 | * ctx.lineTo(100, 100)
|
448 | * ctx.closePath()
|
449 | * ctx.stroke()
|
450 | * ctx.draw()
|
451 | * ```
|
452 | * @example
|
453 | * ```tsx
|
454 | * const ctx = Taro.createCanvasContext('myCanvas')
|
455 | * // begin path
|
456 | * ctx.rect(10, 10, 100, 30)
|
457 | * ctx.closePath()
|
458 | * // begin another path
|
459 | * ctx.beginPath()
|
460 | * ctx.rect(10, 40, 100, 30)
|
461 | * // only fill this rect, not in current path
|
462 | * ctx.setFillStyle('blue')
|
463 | * ctx.fillRect(10, 70, 100, 30)
|
464 | * ctx.rect(10, 100, 100, 30)
|
465 | * // it will fill current path
|
466 | * ctx.setFillStyle('red')
|
467 | * ctx.fill()
|
468 | * ctx.draw()
|
469 | * ```
|
470 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.closePath.html
|
471 | */
|
472 | closePath(): void
|
473 | /** 创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的`CanvasGradient`对象需要使用 [CanvasGradient.addColorStop()](/docs/apis/canvas/CanvasGradient#addcolorstop) 来指定渐变点,至少要两个。
|
474 | * @supported weapp
|
475 | * @example
|
476 | * ```tsx
|
477 | * const ctx = Taro.createCanvasContext('myCanvas')
|
478 | * // Create circular gradient
|
479 | * const grd = ctx.createCircularGradient(75, 50, 50)
|
480 | * grd.addColorStop(0, 'red')
|
481 | * grd.addColorStop(1, 'white')
|
482 | * // Fill with gradient
|
483 | * ctx.setFillStyle(grd)
|
484 | * ctx.fillRect(10, 10, 150, 80)
|
485 | * ctx.draw()
|
486 | * ```
|
487 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createCircularGradient.html
|
488 | */
|
489 | createCircularGradient(
|
490 | /** 圆心的 x 坐标 */
|
491 | x: number,
|
492 | /** 圆心的 y 坐标 */
|
493 | y: number,
|
494 | /** 圆的半径 */
|
495 | r: number,
|
496 | ): CanvasGradient
|
497 | /** 创建一个线性的渐变颜色。返回的`CanvasGradient`对象需要使用 [CanvasGradient.addColorStop()](/docs/apis/canvas/CanvasGradient#addcolorstop) 来指定渐变点,至少要两个。
|
498 | * @supported weapp
|
499 | * @example
|
500 | * ```tsx
|
501 | * const ctx = Taro.createCanvasContext('myCanvas')
|
502 | * // Create linear gradient
|
503 | * const grd = ctx.createLinearGradient(0, 0, 200, 0)
|
504 | * grd.addColorStop(0, 'red')
|
505 | * grd.addColorStop(1, 'white')
|
506 | * // Fill with gradient
|
507 | * ctx.setFillStyle(grd)
|
508 | * ctx.fillRect(10, 10, 150, 80)
|
509 | * ctx.draw()
|
510 | * ```
|
511 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createLinearGradient.html
|
512 | */
|
513 | createLinearGradient(
|
514 | /** 起点的 x 坐标 */
|
515 | x0: number,
|
516 | /** 起点的 y 坐标 */
|
517 | y0: number,
|
518 | /** 终点的 x 坐标 */
|
519 | x1: number,
|
520 | /** 终点的 y 坐标 */
|
521 | y1: number,
|
522 | ): CanvasGradient
|
523 | /** 对指定的图像创建模式的方法,可在指定的方向上重复元图像
|
524 | * @supported weapp
|
525 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createPattern.html
|
526 | */
|
527 | createPattern(
|
528 | /** 重复的图像源,仅支持包内路径和临时路径 */
|
529 | image: string,
|
530 | /** 如何重复图像 */
|
531 | repetition: keyof CanvasContext.Repetition,
|
532 | ): void
|
533 | /** 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
|
534 | * @supported weapp
|
535 | * @example
|
536 | * 第二次 draw() reserve 为 true。所以保留了上一次的绘制结果,在上下文设置的 fillStyle 'red' 也变成了默认的 'black'。
|
537 | *
|
538 | * ```tsx
|
539 | * const ctx = Taro.createCanvasContext('myCanvas')
|
540 | * ctx.setFillStyle('red')
|
541 | * ctx.fillRect(10, 10, 150, 100)
|
542 | * ctx.draw()
|
543 | * ctx.fillRect(50, 50, 150, 100)
|
544 | * ctx.draw(true)
|
545 | * ```
|
546 | * @example
|
547 | * 第二次 draw() reserve 为 false。所以没有保留了上一次的绘制结果和在上下文设置的 fillStyle 'red'。
|
548 | *
|
549 | * ```tsx
|
550 | * const ctx = Taro.createCanvasContext('myCanvas')
|
551 | * ctx.setFillStyle('red')
|
552 | * ctx.fillRect(10, 10, 150, 100)
|
553 | * ctx.draw()
|
554 | * ctx.fillRect(50, 50, 150, 100)
|
555 | * ctx.draw()
|
556 | * ```
|
557 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.draw.html
|
558 | */
|
559 | draw(
|
560 | /** 本次绘制是否接着上一次绘制。即 reserve 参数为 false,则在本次调用绘制之前 native 层会先清空画布再继续绘制;若 reserve 参数为 true,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面,默认 false。 */
|
561 | reserve?: boolean,
|
562 | /** 绘制完成后执行的回调函数 */
|
563 | callback?: (...args: any[]) => any,
|
564 | ): void
|
565 | /** 绘制图像到画布
|
566 | * @supported weapp
|
567 | * @example
|
568 | * 有三个版本的写法:
|
569 | *
|
570 | * - drawImage(imageResource, dx, dy)
|
571 | * - drawImage(imageResource, dx, dy, dWidth, dHeight)
|
572 | * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
|
573 | *
|
574 | * ```tsx
|
575 | * const ctx = Taro.createCanvasContext('myCanvas')
|
576 | * Taro.chooseImage({
|
577 | * success: function(res){
|
578 | * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
|
579 | * ctx.draw()
|
580 | * }
|
581 | * })
|
582 | * ```
|
583 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
584 | */
|
585 | drawImage(
|
586 | /** 所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载) */
|
587 | imageResource: string,
|
588 | /** imageResource的左上角在目标 canvas 上 x 轴的位置 */
|
589 | dx: number,
|
590 | /** imageResource的左上角在目标 canvas 上 y 轴的位置 */
|
591 | dy: number,
|
592 | ): void
|
593 | /** 绘制图像到画布
|
594 | * @supported weapp
|
595 | * @example
|
596 | * 有三个版本的写法:
|
597 | *
|
598 | * - drawImage(imageResource, dx, dy)
|
599 | * - drawImage(imageResource, dx, dy, dWidth, dHeight)
|
600 | * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
|
601 | *
|
602 | * ```tsx
|
603 | * const ctx = Taro.createCanvasContext('myCanvas')
|
604 | * Taro.chooseImage({
|
605 | * success: function(res){
|
606 | * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
|
607 | * ctx.draw()
|
608 | * }
|
609 | * })
|
610 | * ```
|
611 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
612 | */
|
613 | drawImage(
|
614 | /** 所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载) */
|
615 | imageResource: string,
|
616 | /** imageResource的左上角在目标 canvas 上 x 轴的位置 */
|
617 | dx: number,
|
618 | /** imageResource的左上角在目标 canvas 上 y 轴的位置 */
|
619 | dy: number,
|
620 | /** 在目标画布上绘制imageResource的宽度,允许对绘制的imageResource进行缩放 */
|
621 | dWidth: number,
|
622 | /** 在目标画布上绘制imageResource的高度,允许对绘制的imageResource进行缩放 */
|
623 | dHeight: number,
|
624 | ): void
|
625 | /** 绘制图像到画布
|
626 | * @supported weapp
|
627 | * @example
|
628 | * 有三个版本的写法:
|
629 | *
|
630 | * - drawImage(imageResource, dx, dy)
|
631 | * - drawImage(imageResource, dx, dy, dWidth, dHeight)
|
632 | * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
|
633 | *
|
634 | * ```tsx
|
635 | * const ctx = Taro.createCanvasContext('myCanvas')
|
636 | * Taro.chooseImage({
|
637 | * success: function(res){
|
638 | * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
|
639 | * ctx.draw()
|
640 | * }
|
641 | * })
|
642 | * ```
|
643 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
644 | */
|
645 | drawImage(
|
646 | /** 所要绘制的图片资源(网络图片要通过 getImageInfo / downloadFile 先下载) */
|
647 | imageResource: string,
|
648 | /** 需要绘制到画布中的,imageResource的矩形(裁剪)选择框的左上角 x 坐标 */
|
649 | sx: number,
|
650 | /** 需要绘制到画布中的,imageResource的矩形(裁剪)选择框的左上角 y 坐标 */
|
651 | sy: number,
|
652 | /** 需要绘制到画布中的,imageResource的矩形(裁剪)选择框的宽度 */
|
653 | sWidth: number,
|
654 | /** 需要绘制到画布中的,imageResource的矩形(裁剪)选择框的高度 */
|
655 | sHeight: number,
|
656 | /** imageResource的左上角在目标 canvas 上 x 轴的位置 */
|
657 | dx: number,
|
658 | /** imageResource的左上角在目标 canvas 上 y 轴的位置 */
|
659 | dy: number,
|
660 | /** 在目标画布上绘制imageResource的宽度,允许对绘制的imageResource进行缩放 */
|
661 | dWidth: number,
|
662 | /** 在目标画布上绘制imageResource的高度,允许对绘制的imageResource进行缩放 */
|
663 | dHeight: number,
|
664 | ): void
|
665 | /** 对当前路径中的内容进行填充。默认的填充色为黑色。
|
666 | * @supported weapp
|
667 | * @example
|
668 | * 如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充。
|
669 | *
|
670 | * ```tsx
|
671 | * const ctx = Taro.createCanvasContext('myCanvas')
|
672 | * ctx.moveTo(10, 10)
|
673 | * ctx.lineTo(100, 10)
|
674 | * ctx.lineTo(100, 100)
|
675 | * ctx.fill()
|
676 | * ctx.draw()
|
677 | * ```
|
678 | * @example
|
679 | * fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去。
|
680 | *
|
681 | * ```tsx
|
682 | * const ctx = Taro.createCanvasContext('myCanvas')
|
683 | * // begin path
|
684 | * ctx.rect(10, 10, 100, 30)
|
685 | * ctx.setFillStyle('yellow')
|
686 | * ctx.fill()
|
687 | * // begin another path
|
688 | * ctx.beginPath()
|
689 | * ctx.rect(10, 40, 100, 30)
|
690 | * // only fill this rect, not in current path
|
691 | * ctx.setFillStyle('blue')
|
692 | * ctx.fillRect(10, 70, 100, 30)
|
693 | * ctx.rect(10, 100, 100, 30)
|
694 | * // it will fill current path
|
695 | * ctx.setFillStyle('red')
|
696 | * ctx.fill()
|
697 | * ctx.draw()
|
698 | * ```
|
699 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fill.html
|
700 | */
|
701 | fill(): void
|
702 | /** 填充一个矩形。用 [`setFillStyle`](/docs/apis/canvas/CanvasContext#setfillstyle) 设置矩形的填充色,如果没设置默认是黑色。
|
703 | * @supported weapp
|
704 | * @example
|
705 | * ```tsx
|
706 | * const ctx = Taro.createCanvasContext('myCanvas')
|
707 | * ctx.setFillStyle('red')
|
708 | * ctx.fillRect(10, 10, 150, 75)
|
709 | * ctx.draw()
|
710 | * ```
|
711 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fillRect.html
|
712 | */
|
713 | fillRect(
|
714 | /** 矩形路径左上角的横坐标 */
|
715 | x: number,
|
716 | /** 矩形路径左上角的纵坐标 */
|
717 | y: number,
|
718 | /** 矩形路径的宽度 */
|
719 | width: number,
|
720 | /** 矩形路径的高度 */
|
721 | height: number,
|
722 | ): void
|
723 | /** 在画布上绘制被填充的文本
|
724 | * @supported weapp
|
725 | * @example
|
726 | * ```tsx
|
727 | * const ctx = Taro.createCanvasContext('myCanvas')
|
728 | * ctx.setFontSize(20)
|
729 | * ctx.fillText('Hello', 20, 20)
|
730 | * ctx.fillText('MINA', 100, 100)
|
731 | * ctx.draw()
|
732 | * ```
|
733 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fillText.html
|
734 | */
|
735 | fillText(
|
736 | /** 在画布上输出的文本 */
|
737 | text: string,
|
738 | /** 绘制文本的左上角 x 坐标位置 */
|
739 | x: number,
|
740 | /** 绘制文本的左上角 y 坐标位置 */
|
741 | y: number,
|
742 | /** 需要绘制的最大宽度,可选 */
|
743 | maxWidth?: number,
|
744 | ): void
|
745 | /** 增加一个新点,然后创建一条从上次指定点到目标点的线。用 `stroke` 方法来画线条
|
746 | * @supported weapp
|
747 | * @example
|
748 | * ```tsx
|
749 | * const ctx = Taro.createCanvasContext('myCanvas')
|
750 | * ctx.moveTo(10, 10)
|
751 | * ctx.rect(10, 10, 100, 50)
|
752 | * ctx.lineTo(110, 60)
|
753 | * ctx.stroke()
|
754 | * ctx.draw()
|
755 | * ```
|
756 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.lineTo.html
|
757 | */
|
758 | lineTo(
|
759 | /** 目标位置的 x 坐标 */
|
760 | x: number,
|
761 | /** 目标位置的 y 坐标 */
|
762 | y: number,
|
763 | ): void
|
764 | /** 测量文本尺寸信息。目前仅返回文本宽度。同步接口。
|
765 | * @supported weapp
|
766 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.measureText.html
|
767 | */
|
768 | measureText(
|
769 | /** 要测量的文本 */
|
770 | text: string,
|
771 | ): TextMetrics
|
772 | /** 把路径移动到画布中的指定点,不创建线条。用 `stroke` 方法来画线条
|
773 | * @supported weapp
|
774 | * @example
|
775 | * ```tsx
|
776 | * const ctx = Taro.createCanvasContext('myCanvas')
|
777 | * ctx.moveTo(10, 10)
|
778 | * ctx.lineTo(100, 10)
|
779 | * ctx.moveTo(10, 50)
|
780 | * ctx.lineTo(100, 50)
|
781 | * ctx.stroke()
|
782 | * ctx.draw()
|
783 | * ```
|
784 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.moveTo.html
|
785 | */
|
786 | moveTo(
|
787 | /** 目标位置的 x 坐标 */
|
788 | x: number,
|
789 | /** 目标位置的 y 坐标 */
|
790 | y: number,
|
791 | ): void
|
792 | /** 创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
|
793 | *
|
794 | * 针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) 的三个关键坐标如下:
|
795 | *
|
796 | * - 红色:起始点(20, 20)
|
797 | * - 蓝色:控制点(20, 100)
|
798 | * - 绿色:终止点(200, 20)
|
799 | * @supported weapp
|
800 | * @example
|
801 | * ```tsx
|
802 | * const ctx = Taro.createCanvasContext('myCanvas')
|
803 | * // Draw points
|
804 | * ctx.beginPath()
|
805 | * ctx.arc(20, 20, 2, 0, 2 * Math.PI)
|
806 | * ctx.setFillStyle('red')
|
807 | * ctx.fill()
|
808 | * ctx.beginPath()
|
809 | * ctx.arc(200, 20, 2, 0, 2 * Math.PI)
|
810 | * ctx.setFillStyle('lightgreen')
|
811 | * ctx.fill()
|
812 | * ctx.beginPath()
|
813 | * ctx.arc(20, 100, 2, 0, 2 * Math.PI)
|
814 | * ctx.setFillStyle('blue')
|
815 | * ctx.fill()
|
816 | * ctx.setFillStyle('black')
|
817 | * ctx.setFontSize(12)
|
818 | * // Draw guides
|
819 | * ctx.beginPath()
|
820 | * ctx.moveTo(20, 20)
|
821 | * ctx.lineTo(20, 100)
|
822 | * ctx.lineTo(200, 20)
|
823 | * ctx.setStrokeStyle('#AAAAAA')
|
824 | * ctx.stroke()
|
825 | * // Draw quadratic curve
|
826 | * ctx.beginPath()
|
827 | * ctx.moveTo(20, 20)
|
828 | * ctx.quadraticCurveTo(20, 100, 200, 20)
|
829 | * ctx.setStrokeStyle('black')
|
830 | * ctx.stroke()
|
831 | * ctx.draw()
|
832 | * ```
|
833 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.quadraticCurveTo.html
|
834 | */
|
835 | quadraticCurveTo(
|
836 | /** 贝塞尔控制点的 x 坐标 */
|
837 | cpx: number,
|
838 | /** 贝塞尔控制点的 y 坐标 */
|
839 | cpy: number,
|
840 | /** 结束点的 x 坐标 */
|
841 | x: number,
|
842 | /** 结束点的 y 坐标 */
|
843 | y: number,
|
844 | ): void
|
845 | /** 创建一个矩形路径。需要用 [`fill`](/docs/apis/canvas/CanvasContext#fill) 或者 [`stroke`](/docs/apis/canvas/CanvasContext#stroke) 方法将矩形真正的画到 `canvas` 中
|
846 | * @supported weapp
|
847 | * @example
|
848 | * ```tsx
|
849 | * const ctx = Taro.createCanvasContext('myCanvas')
|
850 | * ctx.rect(10, 10, 150, 75)
|
851 | * ctx.setFillStyle('red')
|
852 | * ctx.fill()
|
853 | * ctx.draw()
|
854 | * ```
|
855 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.rect.html
|
856 | */
|
857 | rect(
|
858 | /** 矩形路径左上角的横坐标 */
|
859 | x: number,
|
860 | /** 矩形路径左上角的纵坐标 */
|
861 | y: number,
|
862 | /** 矩形路径的宽度 */
|
863 | width: number,
|
864 | /** 矩形路径的高度 */
|
865 | height: number,
|
866 | ): void
|
867 | /** 恢复之前保存的绘图上下文
|
868 | * @supported weapp
|
869 | * @example
|
870 | * ```tsx
|
871 | * const ctx = Taro.createCanvasContext('myCanvas')
|
872 | * // save the default fill style
|
873 | * ctx.save()
|
874 | * ctx.setFillStyle('red')
|
875 | * ctx.fillRect(10, 10, 150, 100)
|
876 | * // restore to the previous saved state
|
877 | * ctx.restore()
|
878 | * ctx.fillRect(50, 50, 150, 100)
|
879 | * ctx.draw()
|
880 | * ```
|
881 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.restore.html
|
882 | */
|
883 | restore(): void
|
884 | /** 以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 `translate` 方法修改。
|
885 | * @supported weapp
|
886 | * @example
|
887 | * ```tsx
|
888 | * const ctx = Taro.createCanvasContext('myCanvas')
|
889 | * ctx.strokeRect(100, 10, 150, 100)
|
890 | * ctx.rotate(20 * Math.PI / 180)
|
891 | * ctx.strokeRect(100, 10, 150, 100)
|
892 | * ctx.rotate(20 * Math.PI / 180)
|
893 | * ctx.strokeRect(100, 10, 150, 100)
|
894 | * ctx.draw()
|
895 | * ```
|
896 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.rotate.html
|
897 | */
|
898 | rotate(
|
899 | /** 旋转角度,以弧度计 degrees * Math.PI/180;degrees 范围为 0-360 */
|
900 | rotate: number,
|
901 | ): void
|
902 | /** 保存绘图上下文。
|
903 | * @supported weapp
|
904 | * @example
|
905 | * ```tsx
|
906 | * const ctx = Taro.createCanvasContext('myCanvas')
|
907 | * // save the default fill style
|
908 | * ctx.save()
|
909 | * ctx.setFillStyle('red')
|
910 | * ctx.fillRect(10, 10, 150, 100)
|
911 | * // restore to the previous saved state
|
912 | * ctx.restore()
|
913 | * ctx.fillRect(50, 50, 150, 100)
|
914 | * ctx.draw()
|
915 | * ```
|
916 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.save.html
|
917 | */
|
918 | save(): void
|
919 | /** 在调用后,之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。
|
920 | * @supported weapp
|
921 | * @example
|
922 | * ```tsx
|
923 | * const ctx = Taro.createCanvasContext('myCanvas')
|
924 | * ctx.strokeRect(10, 10, 25, 15)
|
925 | * ctx.scale(2, 2)
|
926 | * ctx.strokeRect(10, 10, 25, 15)
|
927 | * ctx.scale(2, 2)
|
928 | * ctx.strokeRect(10, 10, 25, 15)
|
929 | * ctx.draw()
|
930 | * ```
|
931 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.scale.html
|
932 | */
|
933 | scale(
|
934 | /** 横坐标缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%) */
|
935 | scaleWidth: number,
|
936 | /** 纵坐标轴缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%) */
|
937 | scaleHeight: number,
|
938 | ): void
|
939 | /** 设置填充色。
|
940 | * @supported weapp
|
941 | * @example
|
942 | * ```tsx
|
943 | * const ctx = Taro.createCanvasContext('myCanvas')
|
944 | * ctx.setFillStyle('red')
|
945 | * ctx.fillRect(10, 10, 150, 75)
|
946 | * ctx.draw()
|
947 | * ```
|
948 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setFillStyle.html
|
949 | */
|
950 | setFillStyle(
|
951 | /** 填充的颜色,默认颜色为 black。 */
|
952 | color: string | CanvasGradient,
|
953 | ): void
|
954 | /** 设置字体的字号
|
955 | * @supported weapp
|
956 | * @example
|
957 | * ```tsx
|
958 | * const ctx = Taro.createCanvasContext('myCanvas')
|
959 | * ctx.setFontSize(20)
|
960 | * ctx.fillText('20', 20, 20)
|
961 | * ctx.setFontSize(30)
|
962 | * ctx.fillText('30', 40, 40)
|
963 | * ctx.setFontSize(40)
|
964 | * ctx.fillText('40', 60, 60)
|
965 | * ctx.setFontSize(50)
|
966 | * ctx.fillText('50', 90, 90)
|
967 | * ctx.draw()
|
968 | * ```
|
969 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setFontSize.html
|
970 | */
|
971 | setFontSize(
|
972 | /** 字体的字号 */
|
973 | fontSize: number,
|
974 | ): void
|
975 | /** 设置全局画笔透明度。
|
976 | * @supported weapp
|
977 | * @example
|
978 | * ```tsx
|
979 | * const ctx = Taro.createCanvasContext('myCanvas')
|
980 | * ctx.setFillStyle('red')
|
981 | * ctx.fillRect(10, 10, 150, 100)
|
982 | * ctx.setGlobalAlpha(0.2)
|
983 | * ctx.setFillStyle('blue')
|
984 | * ctx.fillRect(50, 50, 150, 100)
|
985 | * ctx.setFillStyle('yellow')
|
986 | * ctx.fillRect(100, 100, 150, 100)
|
987 | * ctx.draw()
|
988 | * ```
|
989 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setGlobalAlpha.html
|
990 | */
|
991 | setGlobalAlpha(
|
992 | /** 透明度。范围 0-1,0 表示完全透明,1 表示完全不透明。 */
|
993 | alpha: number,
|
994 | ): void
|
995 | /** 设置线条的端点样式
|
996 | * @supported weapp
|
997 | * @example
|
998 | * ```tsx
|
999 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1000 | * ctx.beginPath()
|
1001 | * ctx.moveTo(10, 10)
|
1002 | * ctx.lineTo(150, 10)
|
1003 | * ctx.stroke()
|
1004 | * ctx.beginPath()
|
1005 | * ctx.setLineCap('butt')
|
1006 | * ctx.setLineWidth(10)
|
1007 | * ctx.moveTo(10, 30)
|
1008 | * ctx.lineTo(150, 30)
|
1009 | * ctx.stroke()
|
1010 | * ctx.beginPath()
|
1011 | * ctx.setLineCap('round')
|
1012 | * ctx.setLineWidth(10)
|
1013 | * ctx.moveTo(10, 50)
|
1014 | * ctx.lineTo(150, 50)
|
1015 | * ctx.stroke()
|
1016 | * ctx.beginPath()
|
1017 | * ctx.setLineCap('square')
|
1018 | * ctx.setLineWidth(10)
|
1019 | * ctx.moveTo(10, 70)
|
1020 | * ctx.lineTo(150, 70)
|
1021 | * ctx.stroke()
|
1022 | * ctx.draw()
|
1023 | * ```
|
1024 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineCap.html
|
1025 | */
|
1026 | setLineCap(
|
1027 | /** 线条的结束端点样式 */
|
1028 | lineCap: keyof CanvasContext.LineCap,
|
1029 | ): void
|
1030 | /** 设置虚线样式。
|
1031 | * @supported weapp
|
1032 | * @example
|
1033 | * ```tsx
|
1034 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1035 | * ctx.setLineDash([10, 20], 5);
|
1036 | * ctx.beginPath();
|
1037 | * ctx.moveTo(0,100);
|
1038 | * ctx.lineTo(400, 100);
|
1039 | * ctx.stroke();
|
1040 | * ctx.draw()
|
1041 | * ```
|
1042 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineDash.html
|
1043 | */
|
1044 | setLineDash(
|
1045 | /** 一组描述交替绘制线段和间距(坐标空间单位)长度的数字 */
|
1046 | pattern: number[],
|
1047 | /** 虚线偏移量 */
|
1048 | offset: number,
|
1049 | ): void
|
1050 | /** 设置线条的交点样式
|
1051 | * @supported weapp
|
1052 | * @example
|
1053 | * ```tsx
|
1054 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1055 | * ctx.beginPath()
|
1056 | * ctx.moveTo(10, 10)
|
1057 | * ctx.lineTo(100, 50)
|
1058 | * ctx.lineTo(10, 90)
|
1059 | * ctx.stroke()
|
1060 | * ctx.beginPath()
|
1061 | * ctx.setLineJoin('bevel')
|
1062 | * ctx.setLineWidth(10)
|
1063 | * ctx.moveTo(50, 10)
|
1064 | * ctx.lineTo(140, 50)
|
1065 | * ctx.lineTo(50, 90)
|
1066 | * ctx.stroke()
|
1067 | * ctx.beginPath()
|
1068 | * ctx.setLineJoin('round')
|
1069 | * ctx.setLineWidth(10)
|
1070 | * ctx.moveTo(90, 10)
|
1071 | * ctx.lineTo(180, 50)
|
1072 | * ctx.lineTo(90, 90)
|
1073 | * ctx.stroke()
|
1074 | * ctx.beginPath()
|
1075 | * ctx.setLineJoin('miter')
|
1076 | * ctx.setLineWidth(10)
|
1077 | * ctx.moveTo(130, 10)
|
1078 | * ctx.lineTo(220, 50)
|
1079 | * ctx.lineTo(130, 90)
|
1080 | * ctx.stroke()
|
1081 | * ctx.draw()
|
1082 | * ```
|
1083 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineJoin.html
|
1084 | */
|
1085 | setLineJoin(
|
1086 | /** 线条的结束交点样式 */
|
1087 | lineJoin: keyof CanvasContext.LineJoin,
|
1088 | ): void
|
1089 | /** 设置线条的宽度
|
1090 | * @supported weapp
|
1091 | * @example
|
1092 | * ```tsx
|
1093 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1094 | * ctx.beginPath()
|
1095 | * ctx.moveTo(10, 10)
|
1096 | * ctx.lineTo(150, 10)
|
1097 | * ctx.stroke()
|
1098 | * ctx.beginPath()
|
1099 | * ctx.setLineWidth(5)
|
1100 | * ctx.moveTo(10, 30)
|
1101 | * ctx.lineTo(150, 30)
|
1102 | * ctx.stroke()
|
1103 | * ctx.beginPath()
|
1104 | * ctx.setLineWidth(10)
|
1105 | * ctx.moveTo(10, 50)
|
1106 | * ctx.lineTo(150, 50)
|
1107 | * ctx.stroke()
|
1108 | * ctx.beginPath()
|
1109 | * ctx.setLineWidth(15)
|
1110 | * ctx.moveTo(10, 70)
|
1111 | * ctx.lineTo(150, 70)
|
1112 | * ctx.stroke()
|
1113 | * ctx.draw()
|
1114 | * ```
|
1115 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineWidth.html
|
1116 | */
|
1117 | setLineWidth(
|
1118 | /** 线条的宽度,单位px */
|
1119 | lineWidth: number,
|
1120 | ): void
|
1121 | /** 设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 [CanvasContext.setLineJoin()](/docs/apis/canvas/CanvasContext#setlinejoin) 为 miter 时才有效。超过最大倾斜长度的,连接处将以 lineJoin 为 bevel 来显示。
|
1122 | * @supported weapp
|
1123 | * @example
|
1124 | * ```tsx
|
1125 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1126 | * ctx.beginPath()
|
1127 | * ctx.setLineWidth(10)
|
1128 | * ctx.setLineJoin('miter')
|
1129 | * ctx.setMiterLimit(1)
|
1130 | * ctx.moveTo(10, 10)
|
1131 | * ctx.lineTo(100, 50)
|
1132 | * ctx.lineTo(10, 90)
|
1133 | * ctx.stroke()
|
1134 | * ctx.beginPath()
|
1135 | * ctx.setLineWidth(10)
|
1136 | * ctx.setLineJoin('miter')
|
1137 | * ctx.setMiterLimit(2)
|
1138 | * ctx.moveTo(50, 10)
|
1139 | * ctx.lineTo(140, 50)
|
1140 | * ctx.lineTo(50, 90)
|
1141 | * ctx.stroke()
|
1142 | * ctx.beginPath()
|
1143 | * ctx.setLineWidth(10)
|
1144 | * ctx.setLineJoin('miter')
|
1145 | * ctx.setMiterLimit(3)
|
1146 | * ctx.moveTo(90, 10)
|
1147 | * ctx.lineTo(180, 50)
|
1148 | * ctx.lineTo(90, 90)
|
1149 | * ctx.stroke()
|
1150 | * ctx.beginPath()
|
1151 | * ctx.setLineWidth(10)
|
1152 | * ctx.setLineJoin('miter')
|
1153 | * ctx.setMiterLimit(4)
|
1154 | * ctx.moveTo(130, 10)
|
1155 | * ctx.lineTo(220, 50)
|
1156 | * ctx.lineTo(130, 90)
|
1157 | * ctx.stroke()
|
1158 | * ctx.draw()
|
1159 | * ```
|
1160 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setMiterLimit.html
|
1161 | */
|
1162 | setMiterLimit(
|
1163 | /** 最大斜接长度 */
|
1164 | miterLimit: number,
|
1165 | ): void
|
1166 | /** 设定阴影样式。
|
1167 | * @supported weapp
|
1168 | * @example
|
1169 | * ```tsx
|
1170 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1171 | * ctx.setFillStyle('red')
|
1172 | * ctx.setShadow(10, 50, 50, 'blue')
|
1173 | * ctx.fillRect(10, 10, 150, 75)
|
1174 | * ctx.draw()
|
1175 | * ```
|
1176 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setShadow.html
|
1177 | */
|
1178 | setShadow(
|
1179 | /** 阴影相对于形状在水平方向的偏移,默认值为 0。 */
|
1180 | offsetX: number,
|
1181 | /** 阴影相对于形状在竖直方向的偏移,默认值为 0。 */
|
1182 | offsetY: number,
|
1183 | /** 阴影的模糊级别,数值越大越模糊。范围 0- 100。,默认值为 0。 */
|
1184 | blur: number,
|
1185 | /** 阴影的颜色。默认值为 black。 */
|
1186 | color: string,
|
1187 | ): void
|
1188 | /** 设置描边颜色。
|
1189 | * @supported weapp
|
1190 | * @example
|
1191 | * ```tsx
|
1192 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1193 | * ctx.setStrokeStyle('red')
|
1194 | * ctx.strokeRect(10, 10, 150, 75)
|
1195 | * ctx.draw()
|
1196 | * ```
|
1197 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setStrokeStyle.html
|
1198 | */
|
1199 | setStrokeStyle(
|
1200 | /** 描边的颜色,默认颜色为 black。 */
|
1201 | color: string | CanvasGradient,
|
1202 | ): void
|
1203 | /** 设置文字的对齐
|
1204 | * @supported weapp
|
1205 | * @example
|
1206 | * ```tsx
|
1207 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1208 | * ctx.setStrokeStyle('red')
|
1209 | * ctx.moveTo(150, 20)
|
1210 | * ctx.lineTo(150, 170)
|
1211 | * ctx.stroke()
|
1212 | * ctx.setFontSize(15)
|
1213 | * ctx.setTextAlign('left')
|
1214 | * ctx.fillText('textAlign=left', 150, 60)
|
1215 | * ctx.setTextAlign('center')
|
1216 | * ctx.fillText('textAlign=center', 150, 80)
|
1217 | * ctx.setTextAlign('right')
|
1218 | * ctx.fillText('textAlign=right', 150, 100)
|
1219 | * ctx.draw()
|
1220 | * ```
|
1221 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTextAlign.html
|
1222 | */
|
1223 | setTextAlign(
|
1224 | /** 文字的对齐方式 */
|
1225 | align: keyof CanvasContext.Align,
|
1226 | ): void
|
1227 | /** 设置文字的竖直对齐
|
1228 | * @supported weapp
|
1229 | * @example
|
1230 | * ```tsx
|
1231 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1232 | * ctx.setStrokeStyle('red')
|
1233 | * ctx.moveTo(5, 75)
|
1234 | * ctx.lineTo(295, 75)
|
1235 | * ctx.stroke()
|
1236 | * ctx.setFontSize(20)
|
1237 | * ctx.setTextBaseline('top')
|
1238 | * ctx.fillText('top', 5, 75)
|
1239 | * ctx.setTextBaseline('middle')
|
1240 | * ctx.fillText('middle', 50, 75)
|
1241 | * ctx.setTextBaseline('bottom')
|
1242 | * ctx.fillText('bottom', 120, 75)
|
1243 | * ctx.setTextBaseline('normal')
|
1244 | * ctx.fillText('normal', 200, 75)
|
1245 | * ctx.draw()
|
1246 | * ```
|
1247 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTextBaseline.html
|
1248 | */
|
1249 | setTextBaseline(
|
1250 | /** 文字的竖直对齐方式 */
|
1251 | textBaseline: keyof CanvasContext.TextBaseline,
|
1252 | ): void
|
1253 | /** 使用矩阵重新设置(覆盖)当前变换的方法
|
1254 | * @supported weapp
|
1255 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTransform.html
|
1256 | */
|
1257 | setTransform(
|
1258 | /** 水平缩放 */
|
1259 | scaleX: number,
|
1260 | /** 垂直缩放 */
|
1261 | scaleY: number,
|
1262 | /** 水平倾斜 */
|
1263 | skewX: number,
|
1264 | /** 垂直倾斜 */
|
1265 | skewY: number,
|
1266 | /** 水平移动 */
|
1267 | translateX: number,
|
1268 | /** 垂直移动 */
|
1269 | translateY: number,
|
1270 | ): void
|
1271 | /** 画出当前路径的边框。默认颜色色为黑色。
|
1272 | * @supported weapp
|
1273 | * @example
|
1274 | * ```tsx
|
1275 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1276 | * ctx.moveTo(10, 10)
|
1277 | * ctx.lineTo(100, 10)
|
1278 | * ctx.lineTo(100, 100)
|
1279 | * ctx.stroke()
|
1280 | * ctx.draw()
|
1281 | * ```
|
1282 | * @example
|
1283 | * stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去。
|
1284 | *
|
1285 | * ```tsx
|
1286 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1287 | * // begin path
|
1288 | * ctx.rect(10, 10, 100, 30)
|
1289 | * ctx.setStrokeStyle('yellow')
|
1290 | * ctx.stroke()
|
1291 | * // begin another path
|
1292 | * ctx.beginPath()
|
1293 | * ctx.rect(10, 40, 100, 30)
|
1294 | * // only stoke this rect, not in current path
|
1295 | * ctx.setStrokeStyle('blue')
|
1296 | * ctx.strokeRect(10, 70, 100, 30)
|
1297 | * ctx.rect(10, 100, 100, 30)
|
1298 | * // it will stroke current path
|
1299 | * ctx.setStrokeStyle('red')
|
1300 | * ctx.stroke()
|
1301 | * ctx.draw()
|
1302 | * ```
|
1303 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.stroke.html
|
1304 | */
|
1305 | stroke(): void
|
1306 | /** 画一个矩形(非填充)。 用 [`setStrokeStyle`](/docs/apis/canvas/CanvasContext#setstrokestyle) 设置矩形线条的颜色,如果没设置默认是黑色。
|
1307 | * @supported weapp
|
1308 | * @example
|
1309 | * ```tsx
|
1310 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1311 | * ctx.setStrokeStyle('red')
|
1312 | * ctx.strokeRect(10, 10, 150, 75)
|
1313 | * ctx.draw()
|
1314 | * ```
|
1315 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.strokeRect.html
|
1316 | */
|
1317 | strokeRect(
|
1318 | /** 矩形路径左上角的横坐标 */
|
1319 | x: number,
|
1320 | /** 矩形路径左上角的纵坐标 */
|
1321 | y: number,
|
1322 | /** 矩形路径的宽度 */
|
1323 | width: number,
|
1324 | /** 矩形路径的高度 */
|
1325 | height: number,
|
1326 | ): void
|
1327 | /** 给定的 (x, y) 位置绘制文本描边的方法
|
1328 | * @supported weapp
|
1329 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.strokeText.html
|
1330 | */
|
1331 | strokeText(
|
1332 | /** 要绘制的文本 */
|
1333 | text: string,
|
1334 | /** 文本起始点的 x 轴坐标 */
|
1335 | x: number,
|
1336 | /** 文本起始点的 y 轴坐标 */
|
1337 | y: number,
|
1338 | /** 需要绘制的最大宽度,可选 */
|
1339 | maxWidth?: number,
|
1340 | ): void
|
1341 | /** 使用矩阵多次叠加当前变换的方法
|
1342 | * @supported weapp
|
1343 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.transform.html
|
1344 | */
|
1345 | transform(
|
1346 | /** 水平缩放 */
|
1347 | scaleX: number,
|
1348 | /** 垂直缩放 */
|
1349 | scaleY: number,
|
1350 | /** 水平倾斜 */
|
1351 | skewX: number,
|
1352 | /** 垂直倾斜 */
|
1353 | skewY: number,
|
1354 | /** 水平移动 */
|
1355 | translateX: number,
|
1356 | /** 垂直移动 */
|
1357 | translateY: number,
|
1358 | ): void
|
1359 | /** 对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
|
1360 | * @supported weapp
|
1361 | * @example
|
1362 | * ```tsx
|
1363 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1364 | * ctx.strokeRect(10, 10, 150, 100)
|
1365 | * ctx.translate(20, 20)
|
1366 | * ctx.strokeRect(10, 10, 150, 100)
|
1367 | * ctx.translate(20, 20)
|
1368 | * ctx.strokeRect(10, 10, 150, 100)
|
1369 | * ctx.draw()
|
1370 | * ```
|
1371 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.translate.html
|
1372 | */
|
1373 | translate(
|
1374 | /** 水平坐标平移量 */
|
1375 | x: number,
|
1376 | /** 竖直坐标平移量 */
|
1377 | y: number,
|
1378 | ): void
|
1379 | }
|
1380 | namespace CanvasContext {
|
1381 | /** 参数 repetition 可选值 */
|
1382 | interface Repetition {
|
1383 | /** 水平竖直方向都重复 */
|
1384 | 'repeat'
|
1385 | /** 水平方向重复 */
|
1386 | 'repeat-x'
|
1387 | /** 竖直方向重复 */
|
1388 | 'repeat-y'
|
1389 | /** 不重复 */
|
1390 | 'no-repeat'
|
1391 | }
|
1392 |
|
1393 | /** 参数 lineCap 可选值 */
|
1394 | interface LineCap {
|
1395 | /** 向线条的每个末端添加平直的边缘。 */
|
1396 | butt
|
1397 | /** 向线条的每个末端添加圆形线帽。 */
|
1398 | round
|
1399 | /** 向线条的每个末端添加正方形线帽。 */
|
1400 | square
|
1401 | }
|
1402 | /** 参数 lineJoin 可选值 */
|
1403 | interface LineJoin {
|
1404 | /** 斜角 */
|
1405 | bevel
|
1406 | /** 圆角 */
|
1407 | round
|
1408 | /** 尖角 */
|
1409 | miter
|
1410 | }
|
1411 | /** 参数 align 可选值 */
|
1412 | interface Align {
|
1413 | /** 左对齐 */
|
1414 | left
|
1415 | /** 居中对齐 */
|
1416 | center
|
1417 | /** 右对齐 */
|
1418 | right
|
1419 | }
|
1420 | /** 参数 textBaseline 可选值 */
|
1421 | interface TextBaseline {
|
1422 | /** 顶部对齐 */
|
1423 | top
|
1424 | /** 底部对齐 */
|
1425 | bottom
|
1426 | /** 居中对齐 */
|
1427 | middle
|
1428 | normal
|
1429 | }
|
1430 | }
|
1431 |
|
1432 | /** 创建 canvas 的绘图上下文 CanvasContext 对象
|
1433 | * @supported weapp
|
1434 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasGradient.html
|
1435 | */
|
1436 | interface CanvasGradient {
|
1437 | /** 添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染,大于最大 stop 的部分会按最大 stop 的 color 来渲染
|
1438 | * @supported weapp
|
1439 | * @example
|
1440 | * ```tsx
|
1441 | * const ctx = Taro.createCanvasContext('myCanvas')
|
1442 | * // Create circular gradient
|
1443 | * const grd = ctx.createLinearGradient(30, 10, 120, 10)
|
1444 | * grd.addColorStop(0, 'red')
|
1445 | * grd.addColorStop(0.16, 'orange')
|
1446 | * grd.addColorStop(0.33, 'yellow')
|
1447 | * grd.addColorStop(0.5, 'green')
|
1448 | * grd.addColorStop(0.66, 'cyan')
|
1449 | * grd.addColorStop(0.83, 'blue')
|
1450 | * grd.addColorStop(1, 'purple')
|
1451 | * // Fill with gradient
|
1452 | * ctx.setFillStyle(grd)
|
1453 | * ctx.fillRect(10, 10, 150, 80)
|
1454 | * ctx.draw()
|
1455 | * ```
|
1456 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasGradient.addColorStop.html
|
1457 | */
|
1458 | addColorStop(
|
1459 | /** 表示渐变中开始与结束之间的位置,范围 0-1。 */
|
1460 | stop: number,
|
1461 | /** 渐变点的颜色。 */
|
1462 | color: string,
|
1463 | ): void
|
1464 | }
|
1465 |
|
1466 | /** 颜色。可以用以下几种方式来表示 canvas 中使用的颜色:
|
1467 | *
|
1468 | * - RGB 颜色: 如 `'rgb(255, 0, 0)'`
|
1469 | * - RGBA 颜色:如 `'rgba(255, 0, 0, 0.3)'`
|
1470 | * - 16 进制颜色: 如 `'#FF0000'`
|
1471 | * - 预定义的颜色: 如 `'red'`
|
1472 | *
|
1473 | * 其中预定义颜色有以下148个:
|
1474 | * *注意**: Color Name 大小写不敏感
|
1475 | *
|
1476 | * | Color Name | HEX |
|
1477 | * | -------------------- | ------- |
|
1478 | * | AliceBlue | #F0F8FF |
|
1479 | * | AntiqueWhite | #FAEBD7 |
|
1480 | * | Aqua | #00FFFF |
|
1481 | * | Aquamarine | #7FFFD4 |
|
1482 | * | Azure | #F0FFFF |
|
1483 | * | Beige | #F5F5DC |
|
1484 | * | Bisque | #FFE4C4 |
|
1485 | * | Black | #000000 |
|
1486 | * | BlanchedAlmond | #FFEBCD |
|
1487 | * | Blue | #0000FF |
|
1488 | * | BlueViolet | #8A2BE2 |
|
1489 | * | Brown | #A52A2A |
|
1490 | * | BurlyWood | #DEB887 |
|
1491 | * | CadetBlue | #5F9EA0 |
|
1492 | * | Chartreuse | #7FFF00 |
|
1493 | * | Chocolate | #D2691E |
|
1494 | * | Coral | #FF7F50 |
|
1495 | * | CornflowerBlue | #6495ED |
|
1496 | * | Cornsilk | #FFF8DC |
|
1497 | * | Crimson | #DC143C |
|
1498 | * | Cyan | #00FFFF |
|
1499 | * | DarkBlue | #00008B |
|
1500 | * | DarkCyan | #008B8B |
|
1501 | * | DarkGoldenRod | #B8860B |
|
1502 | * | DarkGray | #A9A9A9 |
|
1503 | * | DarkGrey | #A9A9A9 |
|
1504 | * | DarkGreen | #006400 |
|
1505 | * | DarkKhaki | #BDB76B |
|
1506 | * | DarkMagenta | #8B008B |
|
1507 | * | DarkOliveGreen | #556B2F |
|
1508 | * | DarkOrange | #FF8C00 |
|
1509 | * | DarkOrchid | #9932CC |
|
1510 | * | DarkRed | #8B0000 |
|
1511 | * | DarkSalmon | #E9967A |
|
1512 | * | DarkSeaGreen | #8FBC8F |
|
1513 | * | DarkSlateBlue | #483D8B |
|
1514 | * | DarkSlateGray | #2F4F4F |
|
1515 | * | DarkSlateGrey | #2F4F4F |
|
1516 | * | DarkTurquoise | #00CED1 |
|
1517 | * | DarkViolet | #9400D3 |
|
1518 | * | DeepPink | #FF1493 |
|
1519 | * | DeepSkyBlue | #00BFFF |
|
1520 | * | DimGray | #696969 |
|
1521 | * | DimGrey | #696969 |
|
1522 | * | DodgerBlue | #1E90FF |
|
1523 | * | FireBrick | #B22222 |
|
1524 | * | FloralWhite | #FFFAF0 |
|
1525 | * | ForestGreen | #228B22 |
|
1526 | * | Fuchsia | #FF00FF |
|
1527 | * | Gainsboro | #DCDCDC |
|
1528 | * | GhostWhite | #F8F8FF |
|
1529 | * | Gold | #FFD700 |
|
1530 | * | GoldenRod | #DAA520 |
|
1531 | * | Gray | #808080 |
|
1532 | * | Grey | #808080 |
|
1533 | * | Green | #008000 |
|
1534 | * | GreenYellow | #ADFF2F |
|
1535 | * | HoneyDew | #F0FFF0 |
|
1536 | * | HotPink | #FF69B4 |
|
1537 | * | IndianRed | #CD5C5C |
|
1538 | * | Indigo | #4B0082 |
|
1539 | * | Ivory | #FFFFF0 |
|
1540 | * | Khaki | #F0E68C |
|
1541 | * | Lavender | #E6E6FA |
|
1542 | * | LavenderBlush | #FFF0F5 |
|
1543 | * | LawnGreen | #7CFC00 |
|
1544 | * | LemonChiffon | #FFFACD |
|
1545 | * | LightBlue | #ADD8E6 |
|
1546 | * | LightCoral | #F08080 |
|
1547 | * | LightCyan | #E0FFFF |
|
1548 | * | LightGoldenRodYellow | #FAFAD2 |
|
1549 | * | LightGray | #D3D3D3 |
|
1550 | * | LightGrey | #D3D3D3 |
|
1551 | * | LightGreen | #90EE90 |
|
1552 | * | LightPink | #FFB6C1 |
|
1553 | * | LightSalmon | #FFA07A |
|
1554 | * | LightSeaGreen | #20B2AA |
|
1555 | * | LightSkyBlue | #87CEFA |
|
1556 | * | LightSlateGray | #778899 |
|
1557 | * | LightSlateGrey | #778899 |
|
1558 | * | LightSteelBlue | #B0C4DE |
|
1559 | * | LightYellow | #FFFFE0 |
|
1560 | * | Lime | #00FF00 |
|
1561 | * | LimeGreen | #32CD32 |
|
1562 | * | Linen | #FAF0E6 |
|
1563 | * | Magenta | #FF00FF |
|
1564 | * | Maroon | #800000 |
|
1565 | * | MediumAquaMarine | #66CDAA |
|
1566 | * | MediumBlue | #0000CD |
|
1567 | * | MediumOrchid | #BA55D3 |
|
1568 | * | MediumPurple | #9370DB |
|
1569 | * | MediumSeaGreen | #3CB371 |
|
1570 | * | MediumSlateBlue | #7B68EE |
|
1571 | * | MediumSpringGreen | #00FA9A |
|
1572 | * | MediumTurquoise | #48D1CC |
|
1573 | * | MediumVioletRed | #C71585 |
|
1574 | * | MidnightBlue | #191970 |
|
1575 | * | MintCream | #F5FFFA |
|
1576 | * | MistyRose | #FFE4E1 |
|
1577 | * | Moccasin | #FFE4B5 |
|
1578 | * | NavajoWhite | #FFDEAD |
|
1579 | * | Navy | #000080 |
|
1580 | * | OldLace | #FDF5E6 |
|
1581 | * | Olive | #808000 |
|
1582 | * | OliveDrab | #6B8E23 |
|
1583 | * | Orange | #FFA500 |
|
1584 | * | OrangeRed | #FF4500 |
|
1585 | * | Orchid | #DA70D6 |
|
1586 | * | PaleGoldenRod | #EEE8AA |
|
1587 | * | PaleGreen | #98FB98 |
|
1588 | * | PaleTurquoise | #AFEEEE |
|
1589 | * | PaleVioletRed | #DB7093 |
|
1590 | * | PapayaWhip | #FFEFD5 |
|
1591 | * | PeachPuff | #FFDAB9 |
|
1592 | * | Peru | #CD853F |
|
1593 | * | Pink | #FFC0CB |
|
1594 | * | Plum | #DDA0DD |
|
1595 | * | PowderBlue | #B0E0E6 |
|
1596 | * | Purple | #800080 |
|
1597 | * | RebeccaPurple | #663399 |
|
1598 | * | Red | #FF0000 |
|
1599 | * | RosyBrown | #BC8F8F |
|
1600 | * | RoyalBlue | #4169E1 |
|
1601 | * | SaddleBrown | #8B4513 |
|
1602 | * | Salmon | #FA8072 |
|
1603 | * | SandyBrown | #F4A460 |
|
1604 | * | SeaGreen | #2E8B57 |
|
1605 | * | SeaShell | #FFF5EE |
|
1606 | * | Sienna | #A0522D |
|
1607 | * | Silver | #C0C0C0 |
|
1608 | * | SkyBlue | #87CEEB |
|
1609 | * | SlateBlue | #6A5ACD |
|
1610 | * | SlateGray | #708090 |
|
1611 | * | SlateGrey | #708090 |
|
1612 | * | Snow | #FFFAFA |
|
1613 | * | SpringGreen | #00FF7F |
|
1614 | * | SteelBlue | #4682B4 |
|
1615 | * | Tan | #D2B48C |
|
1616 | * | Teal | #008080 |
|
1617 | * | Thistle | #D8BFD8 |
|
1618 | * | Tomato | #FF6347 |
|
1619 | * | Turquoise | #40E0D0 |
|
1620 | * | Violet | #EE82EE |
|
1621 | * | Wheat | #F5DEB3 |
|
1622 | * | White | #FFFFFF |
|
1623 | * | WhiteSmoke | #F5F5F5 |
|
1624 | * | Yellow | #FFFF00 |
|
1625 | * | YellowGreen | #9ACD32 |
|
1626 | * @supported weapp
|
1627 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Color.html
|
1628 | */
|
1629 | interface Color {}
|
1630 |
|
1631 | /** 图片对象
|
1632 | * @supported weapp
|
1633 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Image.html
|
1634 | */
|
1635 | interface Image {
|
1636 | /** 图片的 URL */
|
1637 | src: string
|
1638 | /** 图片的真实高度 */
|
1639 | height: number
|
1640 | /** 图片的真实宽度 */
|
1641 | width: number
|
1642 | /** origin: 发送完整的referrer; no-referrer: 不发送。
|
1643 | *
|
1644 | * 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本
|
1645 | */
|
1646 | referrerPolicy: string
|
1647 | /** 图片加载发生错误后触发的回调函数 */
|
1648 | onerror: (...args: any[]) => any
|
1649 | /** 图片加载完成后触发的回调函数 */
|
1650 | onload: (...args: any[]) => any
|
1651 | }
|
1652 |
|
1653 | /** ImageData 对象
|
1654 | * @supported weapp
|
1655 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/ImageData.html
|
1656 | */
|
1657 | interface ImageData {
|
1658 | /** 使用像素描述 ImageData 的实际宽度 */
|
1659 | width: number
|
1660 | /** 使用像素描述 ImageData 的实际高度 */
|
1661 | height: number
|
1662 | /** 一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示 */
|
1663 | data: Uint8ClampedArray
|
1664 | }
|
1665 |
|
1666 | /** 离屏 canvas 实例,可通过 Taro.createOffscreenCanvas 创建。
|
1667 | * @supported weapp
|
1668 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.html
|
1669 | */
|
1670 | interface OffscreenCanvas {
|
1671 | /** 创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法
|
1672 | *
|
1673 | * > 注意不允许混用 webgl 和 2d 画布创建的图片对象,使用时请注意尽量使用 canvas 自身的 createImage 创建图片对象。
|
1674 | * @supported weapp
|
1675 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.createImage.html
|
1676 | */
|
1677 | createImage(): Image
|
1678 | /** 该方法返回 OffscreenCanvas 的绘图上下文
|
1679 | *
|
1680 | * > 当前仅支持获取 WebGL 绘图上下文
|
1681 | * @supported weapp
|
1682 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.getContext.html
|
1683 | */
|
1684 | getContext(contextType: string): RenderingContext
|
1685 | }
|
1686 |
|
1687 | /** Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。
|
1688 | * @supported weapp
|
1689 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html
|
1690 | */
|
1691 | interface Path2D {}
|
1692 |
|
1693 | /** Canvas 绘图上下文。
|
1694 | *
|
1695 | * ****
|
1696 | *
|
1697 | * - 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象,实现了 [HTML Canvas 2D Context](https://www.w3.org/TR/2dcontext/) 定义的属性、方法。
|
1698 | * - 通过 Canvas.getContext('webgl') 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象,实现了 [WebGL 1.0](https://www.khronos.org/registry/webgl/specs/latest/1.0/) 定义的所有属性、方法、常量。
|
1699 | * @supported weapp
|
1700 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/RenderingContext.html
|
1701 | */
|
1702 | interface RenderingContext {}
|
1703 |
|
1704 | interface TaroStatic {
|
1705 | /** 创建离屏 canvas 实例
|
1706 | * @supported weapp
|
1707 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html
|
1708 | */
|
1709 | createOffscreenCanvas(): OffscreenCanvas
|
1710 |
|
1711 | /** 创建 canvas 的绘图上下文 [CanvasContext](/docs/apis/canvas/CanvasContext) 对象
|
1712 | *
|
1713 | * **Tip**: 需要指定 canvasId,该绘图上下文只作用于对应的 `<canvas/>`
|
1714 | * @supported weapp, h5
|
1715 | * @example
|
1716 | * ```tsx
|
1717 | * const context = Taro.createCanvasContext('canvas')
|
1718 | *
|
1719 | * context.setStrokeStyle("#00ff00")
|
1720 | * context.setLineWidth(5)
|
1721 | * context.rect(0, 0, 200, 200)
|
1722 | * context.stroke()
|
1723 | * context.setStrokeStyle("#ff0000")
|
1724 | * context.setLineWidth(2)
|
1725 | * context.moveTo(160, 100)
|
1726 | * context.arc(100, 100, 60, 0, 2 * Math.PI, true)
|
1727 | * context.moveTo(140, 100)
|
1728 | * context.arc(100, 100, 40, 0, Math.PI, false)
|
1729 | * context.moveTo(85, 80)
|
1730 | * context.arc(80, 80, 5, 0, 2 * Math.PI, true)
|
1731 | * context.moveTo(125, 80)
|
1732 | * context.arc(120, 80, 5, 0, 2 * Math.PI, true)
|
1733 | * context.stroke()
|
1734 | * context.draw()
|
1735 | * ```
|
1736 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html
|
1737 | */
|
1738 | createCanvasContext(
|
1739 | /** 要获取上下文的 [canvas](/docs/components/canvas) 组件 canvas-id 属性 */
|
1740 | canvasId: string,
|
1741 | /** 在自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 [canvas](/docs/components/canvas) ,如果省略则不在任何自定义组件内查找 */
|
1742 | component?: TaroGeneral.IAnyObject,
|
1743 | ): CanvasContext
|
1744 |
|
1745 | /** 把当前画布指定区域的内容导出生成指定大小的图片。在 `draw()` 回调里调用该方法才能保证图片导出成功。
|
1746 | *
|
1747 | * **Bug & Tip:**
|
1748 | *
|
1749 | * 1. `tip`: 在 `draw` 回调里调用该方法才能保证图片导出成功。
|
1750 | * @example
|
1751 | * ```tsx
|
1752 | * Taro.canvasToTempFilePath({
|
1753 | * x: 100,
|
1754 | * y: 200,
|
1755 | * width: 50,
|
1756 | * height: 50,
|
1757 | * destWidth: 100,
|
1758 | * destHeight: 100,
|
1759 | * canvasId: 'myCanvas',
|
1760 | * success: function (res) {
|
1761 | * console.log(res.tempFilePath)
|
1762 | * }
|
1763 | * })
|
1764 | * ```
|
1765 | * @supported weapp, h5
|
1766 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html
|
1767 | */
|
1768 | canvasToTempFilePath(
|
1769 | option: canvasToTempFilePath.Option,
|
1770 | /** 在自定义组件下,当前组件实例的this,以操作组件内 [canvas](/docs/components/canvas) 组件 */
|
1771 | component?: TaroGeneral.IAnyObject,
|
1772 | ): Promise<canvasToTempFilePath.SuccessCallbackResult>
|
1773 |
|
1774 | /** 将像素数据绘制到画布。在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内 `<canvas>` 组件
|
1775 | * @supported weapp, h5
|
1776 | * @example
|
1777 | * ```tsx
|
1778 | * const data = new Uint8ClampedArray([255, 0, 0, 1])
|
1779 | * Taro.canvasPutImageData({
|
1780 | * canvasId: 'myCanvas',
|
1781 | * x: 0,
|
1782 | * y: 0,
|
1783 | * width: 1,
|
1784 | * data: data,
|
1785 | * success: function (res) {}
|
1786 | * })
|
1787 | * ```
|
1788 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasPutImageData.html
|
1789 | */
|
1790 | canvasPutImageData(
|
1791 | option: canvasPutImageData.Option,
|
1792 | /** 在自定义组件下,当前组件实例的this,以操作组件内 [canvas](/docs/components/canvas) 组件 */
|
1793 | component?: TaroGeneral.IAnyObject,
|
1794 | ): Promise<TaroGeneral.CallbackResult>
|
1795 |
|
1796 | /** 获取 canvas 区域隐含的像素数据。
|
1797 | * @supported weapp, h5
|
1798 | * @example
|
1799 | * ```tsx
|
1800 | * Taro.canvasGetImageData({
|
1801 | * canvasId: 'myCanvas',
|
1802 | * x: 0,
|
1803 | * y: 0,
|
1804 | * width: 100,
|
1805 | * height: 100,
|
1806 | * success: function (res) {
|
1807 | * console.log(res.width) // 100
|
1808 | * console.log(res.height) // 100
|
1809 | * console.log(res.data instanceof Uint8ClampedArray) // true
|
1810 | * console.log(res.data.length) // 100 * 100 * 4
|
1811 | * }
|
1812 | * })
|
1813 | * ```
|
1814 | * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasGetImageData.html
|
1815 | */
|
1816 | canvasGetImageData(
|
1817 | option: canvasGetImageData.Option,
|
1818 | /** 在自定义组件下,当前组件实例的this,以操作组件内 [canvas](/docs/components/canvas) 组件 */
|
1819 | component?: TaroGeneral.IAnyObject,
|
1820 | ): Promise<canvasGetImageData.SuccessCallbackResult>
|
1821 | }
|
1822 | }
|