1/* 2 * Copyright (c) 2021-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16/** 17 * Filling style algorithm, which determines whether a point is within or outside the path. The following 18 * two configurations are supported: 19 * "evenodd": odd and even round rule 20 * "nonzero": (Default) Non-zero Wrap Rules 21 * @since 8 22 */ 23/** 24 * Filling style algorithm, which determines whether a point is within or outside the path. The following 25 * two configurations are supported: 26 * "evenodd": odd and even round rule 27 * "nonzero": (Default) Non-zero Wrap Rules 28 * @form 29 * @since 9 30 */ 31declare type CanvasFillRule = "evenodd" | "nonzero"; 32 33/** 34 * Specifies the attribute of drawing the end of each line segment. The following configurations are supported: 35 * "butt": (Default) Segment Ends in Square 36 * "round": Segment ends in a circle 37 * "square": The end of the segment ends in a square, but a rectangular area is added that is the same width 38 * as the segment and is half the thickness of the segment. 39 * @since 8 40 */ 41/** 42 * Specifies the attribute of drawing the end of each line segment. The following configurations are supported: 43 * "butt": (Default) Segment Ends in Square 44 * "round": Segment ends in a circle 45 * "square": The end of the segment ends in a square, but a rectangular area is added that is the same width 46 * as the segment and is half the thickness of the segment. 47 * @form 48 * @since 9 49 */ 50declare type CanvasLineCap = "butt" | "round" | "square"; 51 52/** 53 * Sets the attribute of how two connected parts (line segments, arcs, and curves) whose length is not 0 54 * are connected together. The following three configurations are supported: 55 * "bevel": Fill the ends of the connected sections with an additional triangle-base area, 56 * each with its own independent rectangular corner. 57 * "miter": (Default) An additional diamond region is formed by extending the outer edges of the connected portions 58 * so that they intersect at a point. 59 * "round": Draw the shape of the corner by filling in an additional sector with the center at the end of the 60 * connected section. The radius of the fillet is the width of the segment. 61 * @since 8 62 */ 63/** 64 * Sets the attribute of how two connected parts (line segments, arcs, and curves) whose length is not 0 65 * are connected together. The following three configurations are supported: 66 * "bevel": Fill the ends of the connected sections with an additional triangle-base area, 67 * each with its own independent rectangular corner. 68 * "miter": (Default) An additional diamond region is formed by extending the outer edges of the connected portions 69 * so that they intersect at a point. 70 * "round": Draw the shape of the corner by filling in an additional sector with the center at the end of the 71 * connected section. The radius of the fillet is the width of the segment. 72 * @form 73 * @since 9 74 */ 75declare type CanvasLineJoin = "bevel" | "miter" | "round"; 76 77/** 78 * Indicates the attribute of the current text direction. The options are as follows: 79 * "inherit": (Default) Inherit current Canvas component settings 80 * "ltr": The text direction is left to right. 81 * "rtl": The text direction is from right to left. 82 * @since 8 83 */ 84/** 85 * Indicates the attribute of the current text direction. The options are as follows: 86 * "inherit": (Default) Inherit current Canvas component settings 87 * "ltr": The text direction is left to right. 88 * "rtl": The text direction is from right to left. 89 * @form 90 * @since 9 91 */ 92declare type CanvasDirection = "inherit" | "ltr" | "rtl"; 93 94/** 95 * Describes the alignment mode for drawing text. The options are as follows: 96 * "center": The text is centered. 97 * "end": Where text aligns lines end (Left alignment refers to the local from left to right, 98 * and right alignment refers to the local from right to left) 99 * "left": The text is left-aligned. 100 * "right": The text is right-aligned. 101 * "start": (Default) Where the text snap line begins (Left alignment refers to the local from left to right, 102 * and right alignment refers to the local from right to left) 103 * @since 8 104 */ 105/** 106 * Describes the alignment mode for drawing text. The options are as follows: 107 * "center": The text is centered. 108 * "end": Where text aligns lines end (Left alignment refers to the local from left to right, 109 * and right alignment refers to the local from right to left) 110 * "left": The text is left-aligned. 111 * "right": The text is right-aligned. 112 * "start": (Default) Where the text snap line begins (Left alignment refers to the local from left to right, 113 * and right alignment refers to the local from right to left) 114 * @form 115 * @since 9 116 */ 117declare type CanvasTextAlign = "center" | "end" | "left" | "right" | "start"; 118 119/** 120 * Text baseline, which supports the following configurations: 121 * "alphabetic": (Default) The text baseline is the standard letter baseline. 122 * "bottom": The text baseline is at the bottom of the text block. The difference between the ideographic baseline 123 * and the ideographic baseline is that the ideographic baseline does not need to consider downlink letters. 124 * "hanging": The text baseline is a hanging baseline. 125 * "ideographic": The text baseline is the ideographic baseline; If the character itself exceeds the alphabetic 126 * baseline, the ideographic baseline is at the bottom of the character itself. 127 * "middle": The text baseline is in the middle of the text block. 128 * "top": The text baseline is at the top of the text block. 129 * @since 8 130 */ 131/** 132 * Text baseline, which supports the following configurations: 133 * "alphabetic": (Default) The text baseline is the standard letter baseline. 134 * "bottom": The text baseline is at the bottom of the text block. The difference between the ideographic baseline 135 * and the ideographic baseline is that the ideographic baseline does not need to consider downlink letters. 136 * "hanging": The text baseline is a hanging baseline. 137 * "ideographic": The text baseline is the ideographic baseline; If the character itself exceeds the alphabetic 138 * baseline, the ideographic baseline is at the bottom of the character itself. 139 * "middle": The text baseline is in the middle of the text block. 140 * "top": The text baseline is at the top of the text block. 141 * @form 142 * @since 9 143 */ 144declare type CanvasTextBaseline = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top"; 145 146/** 147 * Sets the image smoothness attribute. The options are as follows: 148 * "high": height 149 * "low": (default)low 150 * "medium": medium 151 * @since 8 152 */ 153/** 154 * Sets the image smoothness attribute. The options are as follows: 155 * "high": height 156 * "low": (default)low 157 * "medium": medium 158 * @form 159 * @since 9 160 */ 161declare type ImageSmoothingQuality = "high" | "low" | "medium"; 162 163/** 164 * Opaque objects that describe gradients, created by createLinearGradient() or createRadialGradient() 165 * @since 8 166 */ 167/** 168 * Opaque objects that describe gradients, created by createLinearGradient() or createRadialGradient() 169 * @form 170 * @since 9 171 */ 172declare class CanvasGradient { 173 /** 174 * Add a breakpoint defined by offset and color to the gradient 175 * @param number Value between 0 and 1, out of range throws INDEX_SIZE_ERR error 176 * @param string CSS color value <color>. If the color value cannot be resolved to a valid CSS color value <color> 177 * a SYNTAX_ERR error is thrown. 178 * @since 8 179 */ 180 /** 181 * Add a breakpoint defined by offset and color to the gradient 182 * @param number Value between 0 and 1, out of range throws INDEX_SIZE_ERR error 183 * @param string CSS color value <color>. If the color value cannot be resolved to a valid CSS color value <color> 184 * a SYNTAX_ERR error is thrown. 185 * @form 186 * @since 9 187 */ 188 addColorStop(offset: number, color: string): void; 189} 190 191/** 192 * Path object, which provides basic methods for drawing paths. 193 * @since 8 194 */ 195/** 196 * Path object, which provides basic methods for drawing paths. 197 * @form 198 * @since 9 199 */ 200declare class CanvasPath { 201 /** 202 * Draw an arc path 203 * @param x The x-axis coordinate of the center (center of the circle) of the arc. 204 * @param y The y-axis coordinate of the center (center of the circle) of the arc. 205 * @param radius Radius of the arc. 206 * @param startAngle Start point of an arc, which starts to be calculated in the x-axis direction. The unit is radian. 207 * @param endAngle The end point of the arc, in radians. 208 * @param counterclockwise If the value is true, the arc is drawn counterclockwise. Otherwise, 209 * the arc is drawn clockwise. The default value is false. 210 * @since 8 211 */ 212 /** 213 * Draw an arc path 214 * @param x The x-axis coordinate of the center (center of the circle) of the arc. 215 * @param y The y-axis coordinate of the center (center of the circle) of the arc. 216 * @param radius Radius of the arc. 217 * @param startAngle Start point of an arc, which starts to be calculated in the x-axis direction. The unit is radian. 218 * @param endAngle The end point of the arc, in radians. 219 * @param counterclockwise If the value is true, the arc is drawn counterclockwise. Otherwise, 220 * the arc is drawn clockwise. The default value is false. 221 * @form 222 * @since 9 223 */ 224 arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void; 225 226 /** 227 * Draw arc paths based on control points and radius 228 * @param x1 The x-axis coordinate of the first control point. 229 * @param y1 The y-axis coordinate of the first control point. 230 * @param x2 The x-axis coordinate of the second control point. 231 * @param y2 The y-axis coordinate of the second control point. 232 * @param radius Radius of the arc. 233 * @since 8 234 */ 235 /** 236 * Draw arc paths based on control points and radius 237 * @param x1 The x-axis coordinate of the first control point. 238 * @param y1 The y-axis coordinate of the first control point. 239 * @param x2 The x-axis coordinate of the second control point. 240 * @param y2 The y-axis coordinate of the second control point. 241 * @param radius Radius of the arc. 242 * @form 243 * @since 9 244 */ 245 arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; 246 247 /** 248 * Drawing Cubic Bessel Curve Paths 249 * @param cp1x The x-axis coordinate of the first control point. 250 * @param cp1y The y-axis coordinate of the first control point. 251 * @param cp2x The x-axis coordinate of the second control point. 252 * @param cp2y The y-axis coordinate of the second control point. 253 * @param x x-axis coordinate of the end point. 254 * @param y y-axis coordinate of the end point. 255 * @since 8 256 */ 257 /** 258 * Drawing Cubic Bessel Curve Paths 259 * @param cp1x The x-axis coordinate of the first control point. 260 * @param cp1y The y-axis coordinate of the first control point. 261 * @param cp2x The x-axis coordinate of the second control point. 262 * @param cp2y The y-axis coordinate of the second control point. 263 * @param x x-axis coordinate of the end point. 264 * @param y y-axis coordinate of the end point. 265 * @form 266 * @since 9 267 */ 268 bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; 269 270 /** 271 * Returns the pen point to the start point of the current sub-path 272 * @since 8 273 */ 274 /** 275 * Returns the pen point to the start point of the current sub-path 276 * @form 277 * @since 9 278 */ 279 closePath(): void; 280 281 /** 282 * Draw an Elliptic Path 283 * @param x x-axis coordinate of the center of the ellipse. 284 * @param y y-axis coordinate of the center of the ellipse. 285 * @param radiusX Radius of the major axis of the ellipse. 286 * @param radiusY Radius of the minor axis of the ellipse. 287 * @param rotation The rotation angle of the ellipse, in radians (not angular degrees). 288 * @param startAngle The angle of the starting point to be drawn, measured from the x-axis in radians 289 * (not angular degrees). 290 * @param endAngle The angle, in radians, at which the ellipse is to be drawn (not angular degrees). 291 * @param counterclockwise If the value is true, the ellipse is drawn counterclockwise. Otherwise, 292 * the ellipse is drawn clockwise. The default value is false. 293 * @since 8 294 */ 295 /** 296 * Draw an Elliptic Path 297 * @param x x-axis coordinate of the center of the ellipse. 298 * @param y y-axis coordinate of the center of the ellipse. 299 * @param radiusX Radius of the major axis of the ellipse. 300 * @param radiusY Radius of the minor axis of the ellipse. 301 * @param rotation The rotation angle of the ellipse, in radians (not angular degrees). 302 * @param startAngle The angle of the starting point to be drawn, measured from the x-axis in radians 303 * (not angular degrees). 304 * @param endAngle The angle, in radians, at which the ellipse is to be drawn (not angular degrees). 305 * @param counterclockwise If the value is true, the ellipse is drawn counterclockwise. Otherwise, 306 * the ellipse is drawn clockwise. The default value is false. 307 * @form 308 * @since 9 309 */ 310 ellipse( 311 x: number, 312 y: number, 313 radiusX: number, 314 radiusY: number, 315 rotation: number, 316 startAngle: number, 317 endAngle: number, 318 counterclockwise?: boolean, 319 ): void; 320 321 /** 322 * Connect sub-path using straight lines 323 * @param x The x-axis coordinate of the end point of the line. 324 * @param y The y-axis coordinate of the end point of the line. 325 * @since 8 326 */ 327 /** 328 * Connect sub-path using straight lines 329 * @param x The x-axis coordinate of the end point of the line. 330 * @param y The y-axis coordinate of the end point of the line. 331 * @form 332 * @since 9 333 */ 334 lineTo(x: number, y: number): void; 335 336 /** 337 * Moves the start point of a new sub-path to the (x, y) coordinate. 338 * @param x The x-axis coordinate of the point. 339 * @param y The y-axis coordinate of the point. 340 * @since 8 341 */ 342 /** 343 * Moves the start point of a new sub-path to the (x, y) coordinate. 344 * @param x The x-axis coordinate of the point. 345 * @param y The y-axis coordinate of the point. 346 * @form 347 * @since 9 348 */ 349 moveTo(x: number, y: number): void; 350 351 /** 352 * Draw quadratic Bezier curve paths 353 * @param cpx The x-axis coordinate of the control point. 354 * @param cpy The y-axis coordinate of the control point. 355 * @param x x-axis coordinate of the end point. 356 * @param y y-axis coordinate of the end point. 357 * @since 8 358 */ 359 /** 360 * Draw quadratic Bezier curve paths 361 * @param cpx The x-axis coordinate of the control point. 362 * @param cpy The y-axis coordinate of the control point. 363 * @param x x-axis coordinate of the end point. 364 * @param y y-axis coordinate of the end point. 365 * @form 366 * @since 9 367 */ 368 quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; 369 370 /** 371 * Draw Rectangular Paths 372 * @param x The x-axis coordinate of the start point of the rectangle. 373 * @param y The y-axis coordinate of the start point of the rectangle. 374 * @param w Width of the rectangle. 375 * @param h Height of the rectangle. 376 * @since 8 377 */ 378 /** 379 * Draw Rectangular Paths 380 * @param x The x-axis coordinate of the start point of the rectangle. 381 * @param y The y-axis coordinate of the start point of the rectangle. 382 * @param w Width of the rectangle. 383 * @param h Height of the rectangle. 384 * @form 385 * @since 9 386 */ 387 rect(x: number, y: number, w: number, h: number): void; 388} 389 390/** 391 * 2D path object for path drawing 392 * @since 8 393 */ 394/** 395 * 2D path object for path drawing 396 * @form 397 * @since 9 398 */ 399declare class Path2D extends CanvasPath { 400 /** 401 * Adds a path according to the specified path variable. 402 * @param path Indicates the path object to be added. 403 * @param transform Transformation matrix of the new trail 404 * @since 8 405 */ 406 /** 407 * Adds a path according to the specified path variable. 408 * @param path Indicates the path object to be added. 409 * @param transform Transformation matrix of the new trail 410 * @form 411 * @since 9 412 */ 413 addPath(path: Path2D, transform?: Matrix2D): void; 414 415 /** 416 * Create an empty path object. 417 * @since 8 418 */ 419 /** 420 * Create an empty path object. 421 * @form 422 * @since 9 423 */ 424 constructor(); 425 426 /** 427 * Create a copy of a path object 428 * @param path Path object to be copied 429 * @since 8 430 */ 431 /** 432 * Create a copy of a path object 433 * @param path Path object to be copied 434 * @form 435 * @since 9 436 */ 437 constructor(path: Path2D); 438 439 /** 440 * Create a new path according to the description. 441 * @param d Indicates the path string that compiles with the SVG path description specifications. 442 * @since 8 443 */ 444 /** 445 * Create a new path according to the description. 446 * @param d Indicates the path string that compiles with the SVG path description specifications. 447 * @form 448 * @since 9 449 */ 450 constructor(d: string); 451} 452 453/** 454 * Describes an opaque object of a template, which is created using the createPattern() method. 455 * @since 8 456 */ 457/** 458 * Describes an opaque object of a template, which is created using the createPattern() method. 459 * @form 460 * @since 9 461 */ 462declare type CanvasPattern = import('../api/@internal/full/canvaspattern').CanvasPattern; 463 464/** 465 * Size information of the text 466 * @since 8 467 */ 468/** 469 * Size information of the text 470 * @form 471 * @since 9 472 */ 473declare interface TextMetrics { 474 /** 475 * Double, the distance from the horizontal line indicated by the textBaseline property to the top of 476 * the rectangular boundary of the rendered text. 477 * @since 8 478 */ 479 /** 480 * Double, the distance from the horizontal line indicated by the textBaseline property to the top of 481 * the rectangular boundary of the rendered text. 482 * @form 483 * @since 9 484 */ 485 readonly actualBoundingBoxAscent: number; 486 487 /** 488 * Double, the distance from the horizontal line indicated by the textBaseline property to the bottom of 489 * the rectangular boundary of the rendered text. 490 * @since 8 491 */ 492 /** 493 * Double, the distance from the horizontal line indicated by the textBaseline property to the bottom of 494 * the rectangular boundary of the rendered text. 495 * @form 496 * @since 9 497 */ 498 readonly actualBoundingBoxDescent: number; 499 500 /** 501 * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to 502 * the left of the text rectangle boundary. 503 * @since 8 504 */ 505 /** 506 * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to 507 * the left of the text rectangle boundary. 508 * @form 509 * @since 9 510 */ 511 readonly actualBoundingBoxLeft: number; 512 513 /** 514 * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to 515 * the right of the text rectangle boundary. 516 * @since 8 517 */ 518 /** 519 * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to 520 * the right of the text rectangle boundary. 521 * @form 522 * @since 9 523 */ 524 readonly actualBoundingBoxRight: number; 525 526 /** 527 * Double, the distance from the horizontal line indicated by the textBaseline property to the alphabetic baseline of 528 * the wireframe. 529 * @since 8 530 */ 531 /** 532 * Double, the distance from the horizontal line indicated by the textBaseline property to the alphabetic baseline of 533 * the wireframe. 534 * @form 535 * @since 9 536 */ 537 readonly alphabeticBaseline: number; 538 539 /** 540 * Double, the distance from the horizontal line indicated by the textBaseline property to the top of the 541 * em square in the wireframe. 542 * @since 8 543 */ 544 /** 545 * Double, the distance from the horizontal line indicated by the textBaseline property to the top of the 546 * em square in the wireframe. 547 * @form 548 * @since 9 549 */ 550 readonly emHeightAscent: number; 551 552 /** 553 * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the 554 * em box in the wireframe. 555 * @since 8 556 */ 557 /** 558 * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the 559 * em box in the wireframe. 560 * @form 561 * @since 9 562 */ 563 readonly emHeightDescent: number; 564 565 /** 566 * Double, distance from the horizontal line indicated by the textBaseline property to the top of the 567 * highest rectangle boundary of all fonts rendering text. 568 * @since 8 569 */ 570 /** 571 * Double, distance from the horizontal line indicated by the textBaseline property to the top of the 572 * highest rectangle boundary of all fonts rendering text. 573 * @form 574 * @since 9 575 */ 576 readonly fontBoundingBoxAscent: number; 577 578 /** 579 * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the 580 * rectangular boundary of all fonts rendering text. 581 * @since 8 582 */ 583 /** 584 * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the 585 * rectangular boundary of all fonts rendering text. 586 * @form 587 * @since 9 588 */ 589 readonly fontBoundingBoxDescent: number; 590 591 /** 592 * Double, distance from the horizontal line indicated by the textBaseline property to 593 * the hanging baseline of the wireframe. 594 * @since 8 595 */ 596 /** 597 * Double, distance from the horizontal line indicated by the textBaseline property to 598 * the hanging baseline of the wireframe. 599 * @form 600 * @since 9 601 */ 602 readonly hangingBaseline: number; 603 604 /** 605 * Double, distance from the horizontal line indicated by the textBaseline property to 606 * the ideographic baseline of the wireframe. 607 * @since 8 608 */ 609 /** 610 * Double, distance from the horizontal line indicated by the textBaseline property to 611 * the ideographic baseline of the wireframe. 612 * @form 613 * @since 9 614 */ 615 readonly ideographicBaseline: number; 616 617 /** 618 * Indicates the width of a character string. The value is of the double type. 619 * @since 8 620 */ 621 /** 622 * Indicates the width of a character string. The value is of the double type. 623 * @form 624 * @since 9 625 */ 626 readonly width: number; 627 628 /** 629 * Indicates the height of a character string. The value is of the double type. 630 * @since 8 631 */ 632 /** 633 * Indicates the height of a character string. The value is of the double type. 634 * @form 635 * @since 9 636 */ 637 readonly height: number; 638} 639 640/** 641 * Bitmap image object that can be drawn onto the current Canvas 642 * @since 8 643 */ 644/** 645 * Bitmap image object that can be drawn onto the current Canvas 646 * @form 647 * @since 9 648 */ 649declare class ImageBitmap { 650 /** 651 * Indicates the height of the CSS pixel unit of ImageData. 652 * @since 8 653 */ 654 /** 655 * Indicates the height of the CSS pixel unit of ImageData. 656 * @form 657 * @since 9 658 */ 659 readonly height: number; 660 661 /** 662 * Indicates the width of the CSS pixel unit of ImageData. 663 * @since 8 664 */ 665 /** 666 * Indicates the width of the CSS pixel unit of ImageData. 667 * @form 668 * @since 9 669 */ 670 readonly width: number; 671 672 /** 673 * Releases all graphics resources associated with an ImageBitmap. 674 * @since 8 675 */ 676 /** 677 * Releases all graphics resources associated with an ImageBitmap. 678 * @form 679 * @since 9 680 */ 681 close(): void; 682 683 /** 684 * Create an ImageBitmap object based on the transferred image path. 685 * @param src Path of the image object. 686 * @since 8 687 */ 688 /** 689 * Create an ImageBitmap object based on the transferred image path. 690 * @param src Path of the image object. 691 * @form 692 * @since 9 693 */ 694 constructor(src: string); 695 696 /** 697 * Transfer a PixelMap object to construct an ImageBitmap object. 698 * @param data PixelMap object 699 * @since 8 700 */ 701 constructor(data: PixelMap); 702} 703 704/** 705 * Image data object 706 * @since 8 707 */ 708/** 709 * Image data object 710 * @form 711 * @since 9 712 */ 713declare class ImageData { 714 /** 715 * Array containing image pixel data 716 * @since 8 717 */ 718 /** 719 * Array containing image pixel data 720 * @form 721 * @since 9 722 */ 723 readonly data: Uint8ClampedArray; 724 725 /** 726 * Width of the image. 727 * @since 8 728 */ 729 /** 730 * Width of the image. 731 * @form 732 * @since 9 733 */ 734 readonly height: number; 735 736 /** 737 * Height of the image. 738 * @since 8 739 */ 740 /** 741 * Height of the image. 742 * @form 743 * @since 9 744 */ 745 readonly width: number; 746 747 /** 748 * Create an ImageData object based on the input parameters. 749 * @param width Width of the image. 750 * @param height Height of the image. 751 * @param data Data of the image. If this parameter is not specified, the default value is a black rectangular image. 752 * @since 8 753 */ 754 /** 755 * Create an ImageData object based on the input parameters. 756 * @param width Width of the image. 757 * @param height Height of the image. 758 * @param data Data of the image. If this parameter is not specified, the default value is a black rectangular image. 759 * @form 760 * @since 9 761 */ 762 constructor(width: number, height: number, data?: Uint8ClampedArray); 763} 764 765/** 766 * This object allows you to set properties when creating a rendering context 767 * @since 8 768 */ 769/** 770 * This object allows you to set properties when creating a rendering context 771 * @form 772 * @since 9 773 */ 774declare class RenderingContextSettings { 775 /** 776 * Indicates whether anti-aliasing is enabled for canvas. The default value is false. 777 * @since 8 778 */ 779 /** 780 * Indicates whether anti-aliasing is enabled for canvas. The default value is false. 781 * @form 782 * @since 9 783 */ 784 antialias?: boolean; 785 786 /** 787 * Create an RenderingContextSettings object based on the antialias and alpha. 788 * @param antialias Indicates whether anti-aliasing is enabled for canvas 789 * @since 8 790 */ 791 /** 792 * Create an RenderingContextSettings object based on the antialias and alpha. 793 * @param antialias Indicates whether anti-aliasing is enabled for canvas 794 * @form 795 * @since 9 796 */ 797 constructor(antialias?: boolean); 798} 799 800/** 801 * Canvas renderer for drawing shapes, text, images and other objects 802 * @since 8 803 */ 804/** 805 * Canvas renderer for drawing shapes, text, images and other objects 806 * @form 807 * @since 9 808 */ 809declare class CanvasRenderer extends CanvasPath { 810 /** 811 * Transparency. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). 812 * The default value is 1.0. If the value is out of range, the assignment is invalid. 813 * @since 8 814 */ 815 /** 816 * Transparency. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). 817 * The default value is 1.0. If the value is out of range, the assignment is invalid. 818 * @form 819 * @since 9 820 */ 821 globalAlpha: number; 822 823 /** 824 * Type of composition operation applied when drawing a new shape. The following types are supported: 825 * source-over: (Default) Draws a new drawing on top of an existing canvas context. 826 * source-in: The new drawing is drawn only where the new drawing overlaps the target canvas. 827 * Everything else is transparent. 828 * source-out: Draws a new drawing where it does not overlap with the existing canvas content. 829 * source-atop: The new drawing is drawn only where it overlaps the content of the existing canvas. 830 * destination-over: Draws a new graphic behind the existing canvas content. 831 * destination-in: Existing canvas content remains where the new drawing overlaps the existing canvas content. 832 * Everything else is transparent. 833 * destination-out: Existing content remains where the new drawing does not overlap. 834 * destination-atop: The existing canvas retains only the part that overlaps with the new drawing, 835 * which is drawn behind the canvas content. 836 * lighter: The color of two overlapping shapes is determined by adding the color values. 837 * copy: Only new graphics are displayed. 838 * xor: In the image, those overlaps and other places outside of the normal drawing are transparent. 839 * multiply: Multiply the top pixel by the bottom pixel, and the result is a darker picture. 840 * screen: The pixels are inverted, multiplied, and inverted again, and the result is a brighter picture. 841 * overlay: The combination of multiply and screen enables dark places to be darker and bright places to be brighter. 842 * darken: Keeps the darkest pixel in both layers. 843 * lighten: Keeps the brightest pixel in both layers. 844 * color-dodge: The inverse of dividing the bottom layer by the top layer. 845 * color-burn: Divide the inverted bottom layer by the top layer, and reverse the result. 846 * hard-light: A combination of multiplication and screen is similar to overlay, but the layers are interchanged. 847 * difference: Subtract the bottom from the top or vice versa to get a positive value. 848 * soft-light: A softer version of hard-light. Pure black or pure white does not result in pure black or pure white. 849 * exclusion: Similar to difference, but with lower contrast. 850 * hue: The luminance and chroma of the bottom layer are retained while the hue of the top layer is employed. 851 * saturation: The luminance (luma) and hue (hue) of the bottom layer are retained while the chroma (chroma) of 852 * the top layer is used. 853 * color: The luminance (luma) of the bottom layer is retained while the hue (hue) and chroma (chroma) of 854 * the top layer are used. 855 * luminosity: The hue and chroma of the bottom layer are maintained while the luminance of the top layer is used. 856 * @since 8 857 */ 858 /** 859 * Type of composition operation applied when drawing a new shape. The following types are supported: 860 * source-over: (Default) Draws a new drawing on top of an existing canvas context. 861 * source-in: The new drawing is drawn only where the new drawing overlaps the target canvas. 862 * Everything else is transparent. 863 * source-out: Draws a new drawing where it does not overlap with the existing canvas content. 864 * source-atop: The new drawing is drawn only where it overlaps the content of the existing canvas. 865 * destination-over: Draws a new graphic behind the existing canvas content. 866 * destination-in: Existing canvas content remains where the new drawing overlaps the existing canvas content. 867 * Everything else is transparent. 868 * destination-out: Existing content remains where the new drawing does not overlap. 869 * destination-atop: The existing canvas retains only the part that overlaps with the new drawing, 870 * which is drawn behind the canvas content. 871 * lighter: The color of two overlapping shapes is determined by adding the color values. 872 * copy: Only new graphics are displayed. 873 * xor: In the image, those overlaps and other places outside of the normal drawing are transparent. 874 * multiply: Multiply the top pixel by the bottom pixel, and the result is a darker picture. 875 * screen: The pixels are inverted, multiplied, and inverted again, and the result is a brighter picture. 876 * overlay: The combination of multiply and screen enables dark places to be darker and bright places to be brighter. 877 * darken: Keeps the darkest pixel in both layers. 878 * lighten: Keeps the brightest pixel in both layers. 879 * color-dodge: The inverse of dividing the bottom layer by the top layer. 880 * color-burn: Divide the inverted bottom layer by the top layer, and reverse the result. 881 * hard-light: A combination of multiplication and screen is similar to overlay, but the layers are interchanged. 882 * difference: Subtract the bottom from the top or vice versa to get a positive value. 883 * soft-light: A softer version of hard-light. Pure black or pure white does not result in pure black or pure white. 884 * exclusion: Similar to difference, but with lower contrast. 885 * hue: The luminance and chroma of the bottom layer are retained while the hue of the top layer is employed. 886 * saturation: The luminance (luma) and hue (hue) of the bottom layer are retained while the chroma (chroma) of 887 * the top layer is used. 888 * color: The luminance (luma) of the bottom layer is retained while the hue (hue) and chroma (chroma) of 889 * the top layer are used. 890 * luminosity: The hue and chroma of the bottom layer are maintained while the luminance of the top layer is used. 891 * @form 892 * @since 9 893 */ 894 globalCompositeOperation: string; 895 896 /** 897 * Draw an image on a canvas 898 * @param image Picture objects drawn to the canvas. 899 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 900 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 901 * @since 8 902 */ 903 /** 904 * Draw an image on a canvas 905 * @param image Picture objects drawn to the canvas. 906 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 907 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 908 * @form 909 * @since 9 910 */ 911 drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void; 912 913 /** 914 * Draw an image on a canvas 915 * @param image Picture objects drawn to the canvas. 916 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 917 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 918 * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled. 919 * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled. 920 * @since 8 921 */ 922 /** 923 * Draw an image on a canvas 924 * @param image Picture objects drawn to the canvas. 925 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 926 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 927 * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled. 928 * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled. 929 * @form 930 * @since 9 931 */ 932 drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void; 933 934 /** 935 *Draw an image on a canvas 936 * @param image Picture objects drawn to the canvas. 937 * @param sx x coordinate of the upper left corner of the rectangle (cropping) selection box of the image. 938 * @param sy y coordinate of the upper left corner of the rectangle (cropping) selection box of the image. 939 * @param sw Width of the rectangle (cropping) selection box of the image. 940 * @param sh Height of the rectangle (cropping) selection box of the image. 941 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 942 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 943 * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled. 944 * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled. 945 * @since 8 946 */ 947 /** 948 *Draw an image on a canvas 949 * @param image Picture objects drawn to the canvas. 950 * @param sx x coordinate of the upper left corner of the rectangle (cropping) selection box of the image. 951 * @param sy y coordinate of the upper left corner of the rectangle (cropping) selection box of the image. 952 * @param sw Width of the rectangle (cropping) selection box of the image. 953 * @param sh Height of the rectangle (cropping) selection box of the image. 954 * @param dx x-axis coordinate of the upper left corner of the image on the target canvas. 955 * @param dy y-axis coordinate of the upper left corner of the image on the target canvas. 956 * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled. 957 * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled. 958 * @form 959 * @since 9 960 */ 961 drawImage( 962 image: ImageBitmap | PixelMap, 963 sx: number, 964 sy: number, 965 sw: number, 966 sh: number, 967 dx: number, 968 dy: number, 969 dw: number, 970 dh: number, 971 ): void; 972 973 /** 974 * Clear the sub-path list and start a new path. 975 * @since 8 976 */ 977 /** 978 * Clear the sub-path list and start a new path. 979 * @form 980 * @since 9 981 */ 982 beginPath(): void; 983 984 /** 985 * Sets the currently created path as the current clipping path 986 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 987 * @since 8 988 */ 989 /** 990 * Sets the currently created path as the current clipping path 991 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 992 * @form 993 * @since 9 994 */ 995 clip(fillRule?: CanvasFillRule): void; 996 997 /** 998 * Tailoring according to the specified path 999 * @param path Path to be cut. 1000 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1001 * @since 8 1002 */ 1003 /** 1004 * Tailoring according to the specified path 1005 * @param path Path to be cut. 1006 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1007 * @form 1008 * @since 9 1009 */ 1010 clip(path: Path2D, fillRule?: CanvasFillRule): void; 1011 1012 /** 1013 * Fills existing paths according to the current fill style. 1014 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1015 * @since 8 1016 */ 1017 /** 1018 * Fills existing paths according to the current fill style. 1019 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1020 * @form 1021 * @since 9 1022 */ 1023 fill(fillRule?: CanvasFillRule): void; 1024 1025 /** 1026 * Fills the specified path according to the current fill style 1027 * @param path Path to be filled. 1028 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1029 * @since 8 1030 */ 1031 /** 1032 * Fills the specified path according to the current fill style 1033 * @param path Path to be filled. 1034 * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}. 1035 * @form 1036 * @since 9 1037 */ 1038 fill(path: Path2D, fillRule?: CanvasFillRule): void; 1039 1040 /** 1041 * Draws an existing path according to the current stroke style. 1042 * @since 8 1043 */ 1044 /** 1045 * Draws an existing path according to the current stroke style. 1046 * @form 1047 * @since 9 1048 */ 1049 stroke(): void; 1050 1051 /** 1052 * Draws the specified path according to the current stroke style 1053 * @param path Specified stroke path object 1054 * @since 8 1055 */ 1056 /** 1057 * Draws the specified path according to the current stroke style 1058 * @param path Specified stroke path object 1059 * @form 1060 * @since 9 1061 */ 1062 stroke(path: Path2D): void; 1063 1064 /** 1065 * Attributes that describe the fill color and style. The default value is # 000 (black). The options are as follows: 1066 * color: Color String 1067 * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}. 1068 * CanvasPattern: Template object. For details, see {@link CanvasPattern}. 1069 * @param path Specified stroke path object 1070 * @since 8 1071 */ 1072 /** 1073 * Attributes that describe the fill color and style. The default value is # 000 (black). The options are as follows: 1074 * color: Color String 1075 * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}. 1076 * CanvasPattern: Template object. For details, see {@link CanvasPattern}. 1077 * @param path Specified stroke path object 1078 * @form 1079 * @since 9 1080 */ 1081 fillStyle: string | CanvasGradient | CanvasPattern; 1082 1083 /** 1084 * Attributes of the stroke color and style. The default value is # 000 (black). The options are as follows: 1085 * color: Color String 1086 * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}. 1087 * CanvasPattern: Template object. For details, see {@link CanvasPattern}. 1088 * @param path Specified stroke path object 1089 * @since 8 1090 */ 1091 /** 1092 * Attributes of the stroke color and style. The default value is # 000 (black). The options are as follows: 1093 * color: Color String 1094 * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}. 1095 * CanvasPattern: Template object. For details, see {@link CanvasPattern}. 1096 * @param path Specified stroke path object 1097 * @form 1098 * @since 9 1099 */ 1100 strokeStyle: string | CanvasGradient | CanvasPattern; 1101 1102 /** 1103 * Creates a linear gradient object that is specified along the parameter coordinates 1104 * @param x0 The x-axis coordinate of the start point. 1105 * @param y0 The y-axis coordinate of the start point. 1106 * @param x1 x-axis coordinate of the end point. 1107 * @param y1 y-axis coordinate of the end point. 1108 * @since 8 1109 */ 1110 /** 1111 * Creates a linear gradient object that is specified along the parameter coordinates 1112 * @param x0 The x-axis coordinate of the start point. 1113 * @param y0 The y-axis coordinate of the start point. 1114 * @param x1 x-axis coordinate of the end point. 1115 * @param y1 y-axis coordinate of the end point. 1116 * @form 1117 * @since 9 1118 */ 1119 createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient; 1120 1121 /** 1122 * Creates a template object using the specified image 1123 * @param image Objects as duplicate image sources 1124 * @param repetition Specifies how to repeat images. The following four modes are supported: 1125 * "repeat": Repeated images in both X and Y directions 1126 * "repeat-x": Repeated images in the X-axis direction but not in the Y-axis direction 1127 * "repeat-y": The image is repeated in the Y axis direction, and the image is not repeated in the X axis direction. 1128 * "no-repeat": Non-repeating images in both X and Y directions 1129 * @since 8 1130 */ 1131 /** 1132 * Creates a template object using the specified image 1133 * @param image Objects as duplicate image sources 1134 * @param repetition Specifies how to repeat images. The following four modes are supported: 1135 * "repeat": Repeated images in both X and Y directions 1136 * "repeat-x": Repeated images in the X-axis direction but not in the Y-axis direction 1137 * "repeat-y": The image is repeated in the Y axis direction, and the image is not repeated in the X axis direction. 1138 * "no-repeat": Non-repeating images in both X and Y directions 1139 * @form 1140 * @since 9 1141 */ 1142 createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null; 1143 1144 /** 1145 * Creates a radioactive gradient object based on parameters that determine the coordinates of two circles 1146 * @param x0 The x-axis coordinate of the start circle. 1147 * @param y0 The y-axis coordinate of the start circle. 1148 * @param r0 Radius of the starting circle. 1149 * @param x1 The x-axis coordinate of the end circle. 1150 * @param y1 The y-axis coordinate of the end circle. 1151 * @param r1 Radius of the end circle. 1152 * @since 8 1153 */ 1154 /** 1155 * Creates a radioactive gradient object based on parameters that determine the coordinates of two circles 1156 * @param x0 The x-axis coordinate of the start circle. 1157 * @param y0 The y-axis coordinate of the start circle. 1158 * @param r0 Radius of the starting circle. 1159 * @param x1 The x-axis coordinate of the end circle. 1160 * @param y1 The y-axis coordinate of the end circle. 1161 * @param r1 Radius of the end circle. 1162 * @form 1163 * @since 9 1164 */ 1165 createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient; 1166 1167 /** 1168 * Provides filter effects such as blur and grayscale. You can set the following filter effects: 1169 * blur(<length>): Adds a Gaussian blur effect to the drawing 1170 * brightness(<percentage>): Provides a linear multiplication for the drawing and adjusts the brightness level. 1171 * contrast(<percentage>): Adjusts the contrast of the image. When the value is 0%, the image is completely black. 1172 * When the value is 100%, there is no change in the image. 1173 * drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>): Shading the image 1174 * --- <offset-x>: Describes the horizontal distance of the shadow. 1175 * --- <offset-y>: Describes the vertical distance of the shadow. 1176 * --- <blur-radius>: Blur radius. The larger the value, the greater the blur. The value cannot be a negative number. 1177 * --- <spread-radius>: Positive numbers make the shadow expand larger, negative numbers make the shadow shrink. 1178 * --- <color>: Shadow Color 1179 * grayscale(<percentage>)：Converts the image to a gray image. When the value is 100%, the image is completely gray. 1180 * When the value is 0%, there is no change in the image. 1181 * hue-rotate(<degree>)：Perform color rotation on an image. When the value is 0 degrees, there is no change in the image. 1182 * invert(<percentage>)：Inverted image (representing the effect of a photographic negative). When the value is 100%, 1183 * the image is completely inverted. When the value is 0%, there is no change in the image. 1184 * opacity(<percentage>)：Transparency of the image. At 0%, the image is completely transparent. 1185 * When the value is 100%, there is no change in the image. 1186 * saturate(<percentage>)：Perform saturation processing on the image. At 0%, the image is completely un-saturated. 1187 * When the value is 100%, there is no change in the image. 1188 * sepia(<percentage>)：The image is sepia (nostalgic style). At 100%, the image turns completely sepia. 1189 * When the value is 0%, there is no change in the image. 1190 * none：Turn off filter effects 1191 * @since 8 1192 */ 1193 /** 1194 * Provides filter effects such as blur and grayscale. You can set the following filter effects: 1195 * blur(<length>): Adds a Gaussian blur effect to the drawing 1196 * brightness(<percentage>): Provides a linear multiplication for the drawing and adjusts the brightness level. 1197 * contrast(<percentage>): Adjusts the contrast of the image. When the value is 0%, the image is completely black. 1198 * When the value is 100%, there is no change in the image. 1199 * drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>): Shading the image 1200 * --- <offset-x>: Describes the horizontal distance of the shadow. 1201 * --- <offset-y>: Describes the vertical distance of the shadow. 1202 * --- <blur-radius>: Blur radius. The larger the value, the greater the blur. The value cannot be a negative number. 1203 * --- <spread-radius>: Positive numbers make the shadow expand larger, negative numbers make the shadow shrink. 1204 * --- <color>: Shadow Color 1205 * grayscale(<percentage>)：Converts the image to a gray image. When the value is 100%, the image is completely gray. 1206 * When the value is 0%, there is no change in the image. 1207 * hue-rotate(<degree>)：Perform color rotation on an image. When the value is 0 degrees, there is no change in the image. 1208 * invert(<percentage>)：Inverted image (representing the effect of a photographic negative). When the value is 100%, 1209 * the image is completely inverted. When the value is 0%, there is no change in the image. 1210 * opacity(<percentage>)：Transparency of the image. At 0%, the image is completely transparent. 1211 * When the value is 100%, there is no change in the image. 1212 * saturate(<percentage>)：Perform saturation processing on the image. At 0%, the image is completely un-saturated. 1213 * When the value is 100%, there is no change in the image. 1214 * sepia(<percentage>)：The image is sepia (nostalgic style). At 100%, the image turns completely sepia. 1215 * When the value is 0%, there is no change in the image. 1216 * none：Turn off filter effects 1217 * @form 1218 * @since 9 1219 */ 1220 filter: string; 1221 1222 /** 1223 * Creates a new, empty ImageData object of the specified size 1224 * @param sw Width of the ImageData object. 1225 * @param sh Height of the ImageData object. 1226 * @since 8 1227 */ 1228 /** 1229 * Creates a new, empty ImageData object of the specified size 1230 * @param sw Width of the ImageData object. 1231 * @param sh Height of the ImageData object. 1232 * @form 1233 * @since 9 1234 */ 1235 createImageData(sw: number, sh: number): ImageData; 1236 1237 /** 1238 * From an existing ImageData object, copy an object with the same width and height as the image. 1239 * The image content is not copied. 1240 * @param imagedata ImageData object to be copied. 1241 * @since 8 1242 */ 1243 /** 1244 * From an existing ImageData object, copy an object with the same width and height as the image. 1245 * The image content is not copied. 1246 * @param imagedata ImageData object to be copied. 1247 * @form 1248 * @since 9 1249 */ 1250 createImageData(imagedata: ImageData): ImageData; 1251 1252 /** 1253 * Obtains the pixel data of a specified area on the current canvas. 1254 * @param sx x coordinate of the upper left corner of the rectangular area of the image data to be extracted. 1255 * @param sy y coordinate of the upper left corner of the rectangular area of the image data to be extracted. 1256 * @param sw The width of the rectangular area of the image data to be extracted. 1257 * @param sh The height of the rectangular area of the image data to be extracted. 1258 * @since 8 1259 */ 1260 /** 1261 * Obtains the pixel data of a specified area on the current canvas. 1262 * @param sx x coordinate of the upper left corner of the rectangular area of the image data to be extracted. 1263 * @param sy y coordinate of the upper left corner of the rectangular area of the image data to be extracted. 1264 * @param sw The width of the rectangular area of the image data to be extracted. 1265 * @param sh The height of the rectangular area of the image data to be extracted. 1266 * @form 1267 * @since 9 1268 */ 1269 getImageData(sx: number, sy: number, sw: number, sh: number): ImageData; 1270 1271 /** 1272 * Obtains the PixelMap of a specified area on the current canvas. 1273 * @param sx x coordinate of the upper left corner of the rectangular area of the PixelMap to be extracted. 1274 * @param sy y coordinate of the upper left corner of the rectangular area of the PixelMap to be extracted. 1275 * @param sw The width of the rectangular area of the PixelMap to be extracted. 1276 * @param sh The height of the rectangular area of the PixelMap to be extracted. 1277 * @since 8 1278 */ 1279 getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap; 1280 1281 /** 1282 * Draws the specified ImageData object onto the canvas 1283 * @param imagedata ImageData object to be drawn. 1284 * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction). 1285 * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction). 1286 * @since 8 1287 */ 1288 /** 1289 * Draws the specified ImageData object onto the canvas 1290 * @param imagedata ImageData object to be drawn. 1291 * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction). 1292 * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction). 1293 * @form 1294 * @since 9 1295 */ 1296 putImageData(imagedata: ImageData, dx: number, dy: number): void; 1297 1298 /** 1299 * Draws the specified ImageData object onto the canvas 1300 * @param imagedata ImageData object to be drawn. 1301 * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction). 1302 * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction). 1303 * @param dirtyX Position of the upper left corner of the rectangular area in the source image data. 1304 * The default is the upper left corner (x coordinate) of the entire image data. 1305 * @param dirtyY Position of the upper left corner of the rectangular area in the source image data. 1306 * The default is the upper left corner (y coordinate) of the entire image data. 1307 * @param dirtyWidth Width of the rectangular area in the source image data. 1308 * The default is the width of the image data. 1309 * @param dirtyHeight Height of the rectangular area in the source image data. 1310 * The default is the height of the image data. 1311 * @since 8 1312 */ 1313 /** 1314 * Draws the specified ImageData object onto the canvas 1315 * @param imagedata ImageData object to be drawn. 1316 * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction). 1317 * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction). 1318 * @param dirtyX Position of the upper left corner of the rectangular area in the source image data. 1319 * The default is the upper left corner (x coordinate) of the entire image data. 1320 * @param dirtyY Position of the upper left corner of the rectangular area in the source image data. 1321 * The default is the upper left corner (y coordinate) of the entire image data. 1322 * @param dirtyWidth Width of the rectangular area in the source image data. 1323 * The default is the width of the image data. 1324 * @param dirtyHeight Height of the rectangular area in the source image data. 1325 * The default is the height of the image data. 1326 * @form 1327 * @since 9 1328 */ 1329 putImageData( 1330 imagedata: ImageData, 1331 dx: number, 1332 dy: number, 1333 dirtyX: number, 1334 dirtyY: number, 1335 dirtyWidth: number, 1336 dirtyHeight: number, 1337 ): void; 1338 1339 /** 1340 * Specifies whether to smooth the image. The value true indicates that the image is smooth (default value). 1341 * The value false indicates that the image is not smooth. 1342 * @since 8 1343 */ 1344 /** 1345 * Specifies whether to smooth the image. The value true indicates that the image is smooth (default value). 1346 * The value false indicates that the image is not smooth. 1347 * @form 1348 * @since 9 1349 */ 1350 imageSmoothingEnabled: boolean; 1351 1352 /** 1353 * Smoothness level of the current image. For details, see {@link ImageSmoothingQuality}. 1354 * @since 8 1355 */ 1356 /** 1357 * Smoothness level of the current image. For details, see {@link ImageSmoothingQuality}. 1358 * @form 1359 * @since 9 1360 */ 1361 imageSmoothingQuality: ImageSmoothingQuality; 1362 1363 /** 1364 * Line segment endpoint attribute. For details, see {@link CanvasLineCap}. 1365 * @since 8 1366 */ 1367 /** 1368 * Line segment endpoint attribute. For details, see {@link CanvasLineCap}. 1369 * @form 1370 * @since 9 1371 */ 1372 lineCap: CanvasLineCap; 1373 1374 /** 1375 * Dotted line offset attribute. The default value is 0.0. 1376 * @since 8 1377 */ 1378 /** 1379 * Dotted line offset attribute. The default value is 0.0. 1380 * @form 1381 * @since 9 1382 */ 1383 lineDashOffset: number; 1384 1385 /** 1386 * Line segment connection point attribute. For details, see {@link CanvasLineJoin}. 1387 * @since 8 1388 */ 1389 /** 1390 * Line segment connection point attribute. For details, see {@link CanvasLineJoin}. 1391 * @form 1392 * @since 9 1393 */ 1394 lineJoin: CanvasLineJoin; 1395 1396 /** 1397 * Line thickness attribute. The value cannot be 0 or a negative number. 1398 * @since 8 1399 */ 1400 /** 1401 * Line thickness attribute. The value cannot be 0 or a negative number. 1402 * @form 1403 * @since 9 1404 */ 1405 lineWidth: number; 1406 1407 /** 1408 * The value of this parameter cannot be 0 or a negative number. 1409 * @since 8 1410 */ 1411 /** 1412 * The value of this parameter cannot be 0 or a negative number. 1413 * @form 1414 * @since 9 1415 */ 1416 miterLimit: number; 1417 1418 /** 1419 * Gets the current segment style. 1420 * @since 8 1421 */ 1422 /** 1423 * Gets the current segment style. 1424 * @form 1425 * @since 9 1426 */ 1427 getLineDash(): number[]; 1428 1429 /** 1430 * Sets the dashed line mode for line drawing. 1431 * @param segments A set of numbers that describe the length of alternating drawn lines segments and 1432 * spacing (coordinate space units). 1433 * @since 8 1434 */ 1435 /** 1436 * Sets the dashed line mode for line drawing. 1437 * @param segments A set of numbers that describe the length of alternating drawn lines segments and 1438 * spacing (coordinate space units). 1439 * @form 1440 * @since 9 1441 */ 1442 setLineDash(segments: number[]): void; 1443 1444 /** 1445 * Clears the drawing content of a rectangular area. 1446 * @param x The x-axis coordinate of the start point of the rectangle. 1447 * @param y The y-axis coordinate of the start point of the rectangle. 1448 * @param w Width of the rectangle. 1449 * @param h Height of the rectangle. 1450 * @since 8 1451 */ 1452 /** 1453 * Clears the drawing content of a rectangular area. 1454 * @param x The x-axis coordinate of the start point of the rectangle. 1455 * @param y The y-axis coordinate of the start point of the rectangle. 1456 * @param w Width of the rectangle. 1457 * @param h Height of the rectangle. 1458 * @form 1459 * @since 9 1460 */ 1461 clearRect(x: number, y: number, w: number, h: number): void; 1462 1463 /** 1464 * Fills a specified rectangular area 1465 * @param x The x-axis coordinate of the start point of the rectangle. 1466 * @param y The y-axis coordinate of the start point of the rectangle. 1467 * @param w Width of the rectangle. 1468 * @param h Height of the rectangle. 1469 * @since 8 1470 */ 1471 /** 1472 * Fills a specified rectangular area 1473 * @param x The x-axis coordinate of the start point of the rectangle. 1474 * @param y The y-axis coordinate of the start point of the rectangle. 1475 * @param w Width of the rectangle. 1476 * @param h Height of the rectangle. 1477 * @form 1478 * @since 9 1479 */ 1480 fillRect(x: number, y: number, w: number, h: number): void; 1481 1482 /** 1483 * Stroke Specify Rectangular Area 1484 * @param x The x-axis coordinate of the start point of the rectangle. 1485 * @param y The y-axis coordinate of the start point of the rectangle. 1486 * @param w Width of the rectangle. 1487 * @param h Height of the rectangle. 1488 * @since 8 1489 */ 1490 /** 1491 * Stroke Specify Rectangular Area 1492 * @param x The x-axis coordinate of the start point of the rectangle. 1493 * @param y The y-axis coordinate of the start point of the rectangle. 1494 * @param w Width of the rectangle. 1495 * @param h Height of the rectangle. 1496 * @form 1497 * @since 9 1498 */ 1499 strokeRect(x: number, y: number, w: number, h: number): void; 1500 1501 /** 1502 * Shadow blur radius. The default value is 0. The value cannot be a negative number. 1503 * @since 8 1504 */ 1505 /** 1506 * Shadow blur radius. The default value is 0. The value cannot be a negative number. 1507 * @form 1508 * @since 9 1509 */ 1510 shadowBlur: number; 1511 1512 /** 1513 * Shadow color. The default value is transparent black. 1514 * @since 8 1515 */ 1516 /** 1517 * Shadow color. The default value is transparent black. 1518 * @form 1519 * @since 9 1520 */ 1521 shadowColor: string; 1522 1523 /** 1524 * Horizontal offset distance of the shadow. The default value is 0. 1525 * @since 8 1526 */ 1527 /** 1528 * Horizontal offset distance of the shadow. The default value is 0. 1529 * @form 1530 * @since 9 1531 */ 1532 shadowOffsetX: number; 1533 1534 /** 1535 * Vertical offset distance of the shadow. The default value is 0. 1536 * @since 8 1537 */ 1538 /** 1539 * Vertical offset distance of the shadow. The default value is 0. 1540 * @form 1541 * @since 9 1542 */ 1543 shadowOffsetY: number; 1544 1545 /** 1546 * Top of the stack pop-up state in the drawing state stack 1547 * @since 8 1548 */ 1549 /** 1550 * Top of the stack pop-up state in the drawing state stack 1551 * @form 1552 * @since 9 1553 */ 1554 restore(): void; 1555 1556 /** 1557 * Saves the current drawing state to the drawing state stack 1558 * @since 8 1559 */ 1560 /** 1561 * Saves the current drawing state to the drawing state stack 1562 * @form 1563 * @since 9 1564 */ 1565 save(): void; 1566 1567 /** 1568 * Fills the specified text at the specified location 1569 * @param text Text string to be drawn. 1570 * @param x The x-axis coordinate of the start point of the text. 1571 * @param y The y-axis coordinate of the start point of the text. 1572 * @param maxWidth Maximum width of the drawing. 1573 * @since 8 1574 */ 1575 /** 1576 * Fills the specified text at the specified location 1577 * @param text Text string to be drawn. 1578 * @param x The x-axis coordinate of the start point of the text. 1579 * @param y The y-axis coordinate of the start point of the text. 1580 * @param maxWidth Maximum width of the drawing. 1581 * @form 1582 * @since 9 1583 */ 1584 fillText(text: string, x: number, y: number, maxWidth?: number): void; 1585 1586 /** 1587 * Measure the size of a specified text. For details about the return value, see {@link TextMetrics}. 1588 * @param text Text string to be measured. 1589 * @since 8 1590 */ 1591 /** 1592 * Measure the size of a specified text. For details about the return value, see {@link TextMetrics}. 1593 * @param text Text string to be measured. 1594 * @form 1595 * @since 9 1596 */ 1597 measureText(text: string): TextMetrics; 1598 1599 /** 1600 * Stroke specified text at specified position 1601 * @param text Text string to be stroked. 1602 * @param x The x-axis coordinate of the start point of the text. 1603 * @param y The y-axis-axis coordinate of the start point of the text. 1604 * @param maxWidth Maximum width of the stroke. 1605 * @since 8 1606 */ 1607 /** 1608 * Stroke specified text at specified position 1609 * @param text Text string to be stroked. 1610 * @param x The x-axis coordinate of the start point of the text. 1611 * @param y The y-axis-axis coordinate of the start point of the text. 1612 * @param maxWidth Maximum width of the stroke. 1613 * @form 1614 * @since 9 1615 */ 1616 strokeText(text: string, x: number, y: number, maxWidth?: number): void; 1617 1618 /** 1619 * Text drawing direction. For details, see {@link CanvasDirection}. 1620 * @since 8 1621 */ 1622 /** 1623 * Text drawing direction. For details, see {@link CanvasDirection}. 1624 * @form 1625 * @since 9 1626 */ 1627 direction: CanvasDirection; 1628 1629 /** 1630 * Font style. The default value is 10px sans-serif. 1631 * @since 8 1632 */ 1633 /** 1634 * Font style. The default value is 10px sans-serif. 1635 * @form 1636 * @since 9 1637 */ 1638 font: string; 1639 1640 /** 1641 * Text alignment mode. For details, see {@link CanvasTextAlign}. 1642 * @since 8 1643 */ 1644 /** 1645 * Text alignment mode. For details, see {@link CanvasTextAlign}. 1646 * @form 1647 * @since 9 1648 */ 1649 textAlign: CanvasTextAlign; 1650 1651 /** 1652 * Text baseline. For details, see {@link CanvasTextBaseline}. 1653 * @since 8 1654 */ 1655 /** 1656 * Text baseline. For details, see {@link CanvasTextBaseline}. 1657 * @form 1658 * @since 9 1659 */ 1660 textBaseline: CanvasTextBaseline; 1661 1662 /** 1663 * Obtains the currently applied transformation matrix. 1664 * @since 8 1665 */ 1666 /** 1667 * Obtains the currently applied transformation matrix. 1668 * @form 1669 * @since 9 1670 */ 1671 getTransform(): Matrix2D; 1672 1673 /** 1674 * Resets the current transformation matrix using the identity matrix 1675 * @since 8 1676 */ 1677 /** 1678 * Resets the current transformation matrix using the identity matrix 1679 * @form 1680 * @since 9 1681 */ 1682 resetTransform(): void; 1683 1684 /** 1685 * Adds the effect of a rotation 1686 * @param angle The radian of clockwise rotation, which can be converted to an angle value using the formula: 1687 * degree * Math.PI / 180 1688 * @since 8 1689 */ 1690 /** 1691 * Adds the effect of a rotation 1692 * @param angle The radian of clockwise rotation, which can be converted to an angle value using the formula: 1693 * degree * Math.PI / 180 1694 * @form 1695 * @since 9 1696 */ 1697 rotate(angle: number): void; 1698 1699 /** 1700 * Increases the scaling effect of the X and Y axes. 1701 * @param x Horizontal scaling factor 1702 * @param y Vertical scaling factor 1703 * @since 8 1704 */ 1705 /** 1706 * Increases the scaling effect of the X and Y axes. 1707 * @param x Horizontal scaling factor 1708 * @param y Vertical scaling factor 1709 * @form 1710 * @since 9 1711 */ 1712 scale(x: number, y: number): void; 1713 1714 /** 1715 * Adds 2D transformation effects, including rotation, translation, and scaling. 1716 * The current transformation matrix will not be overwritten. Multiple transformations will be superimposed. 1717 * @param a Horizontal Zoom 1718 * @param b Vertical Tilt 1719 * @param c Horizontal Tilt 1720 * @param d Vertical Zoom 1721 * @param e Horizontal movement 1722 * @param f Vertical movement 1723 * @since 8 1724 */ 1725 /** 1726 * Adds 2D transformation effects, including rotation, translation, and scaling. 1727 * The current transformation matrix will not be overwritten. Multiple transformations will be superimposed. 1728 * @param a Horizontal Zoom 1729 * @param b Vertical Tilt 1730 * @param c Horizontal Tilt 1731 * @param d Vertical Zoom 1732 * @param e Horizontal movement 1733 * @param f Vertical movement 1734 * @form 1735 * @since 9 1736 */ 1737 setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void; 1738 1739 /** 1740 * The 2D transformation effect is added. The current transformation matrix is not overwritten and 1741 * the transformations are superimposed for multiple times. 1742 * @param transform 2D transformation matrix. For details, see {@link Matrix2D}. 1743 * @since 8 1744 */ 1745 /** 1746 * The 2D transformation effect is added. The current transformation matrix is not overwritten and 1747 * the transformations are superimposed for multiple times. 1748 * @param transform 2D transformation matrix. For details, see {@link Matrix2D}. 1749 * @form 1750 * @since 9 1751 */ 1752 setTransform(transform?: Matrix2D): void; 1753 1754 /** 1755 * Adds the 2D transformation effect, including rotation, translation, and scaling, 1756 * and overwrites the current transformation matrix. 1757 * @param a Horizontal Zoom 1758 * @param b Vertical Tilt 1759 * @param c Horizontal Tilt 1760 * @param d Vertical Zoom 1761 * @param e Horizontal movement 1762 * @param f Vertical movement 1763 * @since 8 1764 */ 1765 /** 1766 * Adds the 2D transformation effect, including rotation, translation, and scaling, 1767 * and overwrites the current transformation matrix. 1768 * @param a Horizontal Zoom 1769 * @param b Vertical Tilt 1770 * @param c Horizontal Tilt 1771 * @param d Vertical Zoom 1772 * @param e Horizontal movement 1773 * @param f Vertical movement 1774 * @form 1775 * @since 9 1776 */ 1777 transform(a: number, b: number, c: number, d: number, e: number, f: number): void; 1778 1779 /** 1780 * Increases the translation effect of the X and Y axes 1781 * @param x Horizontal movement distance 1782 * @param y Vertical travel distance 1783 * @since 8 1784 */ 1785 /** 1786 * Increases the translation effect of the X and Y axes 1787 * @param x Horizontal movement distance 1788 * @param y Vertical travel distance 1789 * @form 1790 * @since 9 1791 */ 1792 translate(x: number, y: number): void; 1793 1794 /** 1795 * Set a PixelMap to the current context. The drawing content is synchronized to the PixelMap. 1796 * @param value PixelMap object 1797 * @since 8 1798 */ 1799 setPixelMap(value?: PixelMap): void; 1800 1801 /** 1802 * transfer ImageBitmap to content. 1803 * @param ImageBitmap 1804 * @since 8 1805 */ 1806 /** 1807 * transfer ImageBitmap to content. 1808 * @param ImageBitmap 1809 * @form 1810 * @since 9 1811 */ 1812 transferFromImageBitmap(bitmap: ImageBitmap): void; 1813} 1814 1815/** 1816 * Draw context object for the Canvas component. 1817 * @since 8 1818 */ 1819/** 1820 * Draw context object for the Canvas component. 1821 * @form 1822 * @since 9 1823 */ 1824declare class CanvasRenderingContext2D extends CanvasRenderer { 1825 /** 1826 * The default value is 0, which is bound to the height of the specified canvas. The value is read-only. 1827 * @since 8 1828 */ 1829 /** 1830 * The default value is 0, which is bound to the height of the specified canvas. The value is read-only. 1831 * @form 1832 * @since 9 1833 */ 1834 readonly height: number; 1835 1836 /** 1837 * The default value is 0, which is bound to the width of the specified canvas. The value is read-only. 1838 * @since 8 1839 */ 1840 /** 1841 * The default value is 0, which is bound to the width of the specified canvas. The value is read-only. 1842 * @form 1843 * @since 9 1844 */ 1845 readonly width: number; 1846 1847 /** 1848 * Generate a character string in the data url format. 1849 * @param type Image format. The default value is image/png. 1850 * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1. 1851 * If the value is out of the range, the default value 0.92 is used. 1852 * @since 8 1853 */ 1854 /** 1855 * Generate a character string in the data url format. 1856 * @param type Image format. The default value is image/png. 1857 * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1. 1858 * If the value is out of the range, the default value 0.92 is used. 1859 * @form 1860 * @since 9 1861 */ 1862 toDataURL(type?: string, quality?: any): string; 1863 1864 /** 1865 * Constructor of the canvas drawing context object, which is used to create a drawing context object. 1866 * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}. 1867 * @since 8 1868 */ 1869 /** 1870 * Constructor of the canvas drawing context object, which is used to create a drawing context object. 1871 * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}. 1872 * @form 1873 * @since 9 1874 */ 1875 constructor(settings?: RenderingContextSettings); 1876} 1877 1878/** 1879 * Draw context object for the OffscreenCanvas component. 1880 * @since 8 1881 */ 1882/** 1883 * Draw context object for the OffscreenCanvas component. 1884 * @form 1885 * @since 9 1886 */ 1887declare class OffscreenCanvasRenderingContext2D extends CanvasRenderer { 1888 /** 1889 * Generate a character string in the data url format. 1890 * @param type Image format. The default value is image/png. 1891 * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1. 1892 * If the value is out of the range, the default value 0.92 is used. 1893 * @since 8 1894 */ 1895 /** 1896 * Generate a character string in the data url format. 1897 * @param type Image format. The default value is image/png. 1898 * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1. 1899 * If the value is out of the range, the default value 0.92 is used. 1900 * @form 1901 * @since 9 1902 */ 1903 toDataURL(type?: string, quality?: any): string; 1904 1905 /** 1906 * transfer the content to ImageBitmap 1907 * @since 8 1908 */ 1909 /** 1910 * transfer the content to ImageBitmap 1911 * @form 1912 * @since 9 1913 */ 1914 transferToImageBitmap(): ImageBitmap; 1915 1916 /** 1917 * Constructor of the canvas drawing context object, which is used to create a drawing context object. 1918 * @param width the width of the OffscreenCanvas 1919 * @param height the height of the OffscreenCanvas 1920 * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}. 1921 * @since 8 1922 */ 1923 /** 1924 * Constructor of the canvas drawing context object, which is used to create a drawing context object. 1925 * @param width the width of the OffscreenCanvas 1926 * @param height the height of the OffscreenCanvas 1927 * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}. 1928 * @form 1929 * @since 9 1930 */ 1931 constructor(width: number, height: number, settings?: RenderingContextSettings); 1932} 1933 1934/** 1935 * Draw an object off the screen. The drawing content is not directly displayed on the screen. 1936 * @since 8 1937 */ 1938/** 1939 * Draw an object off the screen. The drawing content is not directly displayed on the screen. 1940 * @form 1941 * @since 9 1942 */ 1943declare class OffscreenCanvas extends CanvasRenderer { 1944 /** 1945 * Height of the off-screen canvas. 1946 * @since 8 1947 */ 1948 /** 1949 * Height of the off-screen canvas. 1950 * @form 1951 * @since 9 1952 */ 1953 height: number; 1954 1955 /** 1956 * Width of the off-screen canvas. 1957 * @since 8 1958 */ 1959 /** 1960 * Width of the off-screen canvas. 1961 * @form 1962 * @since 9 1963 */ 1964 width: number; 1965 1966 /** 1967 * Exports rendered content as an ImageBitmap object 1968 * @since 8 1969 */ 1970 /** 1971 * Exports rendered content as an ImageBitmap object 1972 * @form 1973 * @since 9 1974 */ 1975 transferToImageBitmap(): ImageBitmap; 1976 1977 /** 1978 * Constructor of the off-screen canvas, which is used to create an off-screen canvas object. 1979 * @param width Width of the off-screen canvas. 1980 * @param height Height of the off-screen canvas. 1981 * @since 8 1982 */ 1983 /** 1984 * Constructor of the off-screen canvas, which is used to create an off-screen canvas object. 1985 * @param width Width of the off-screen canvas. 1986 * @param height Height of the off-screen canvas. 1987 * @form 1988 * @since 9 1989 */ 1990 constructor(width: number, height: number); 1991} 1992 1993/** 1994 *TextTimer component, which provides the text timer capability. 1995 * @since 8 1996 */ 1997/** 1998 *TextTimer component, which provides the text timer capability. 1999 * @form 2000 * @since 9 2001 */ 2002interface CanvasInterface { 2003 /** 2004 * Construct a canvas component. 2005 * @param context Canvas context object. For details, see {@link CanvasRenderingContext2D}. 2006 * @since 8 2007 */ 2008 /** 2009 * Construct a canvas component. 2010 * @param context Canvas context object. For details, see {@link CanvasRenderingContext2D}. 2011 * @form 2012 * @since 9 2013 */ 2014 (context?: CanvasRenderingContext2D): CanvasAttribute; 2015} 2016 2017declare class CanvasAttribute extends CommonMethod<CanvasAttribute> { 2018 /** 2019 * Event notification after the canvas component is constructed. You can draw the canvas at this time. 2020 * @since 8 2021 */ 2022 /** 2023 * Event notification after the canvas component is constructed. You can draw the canvas at this time. 2024 * @form 2025 * @since 9 2026 */ 2027 onReady(event: () => void): CanvasAttribute; 2028} 2029 2030/** 2031 * Defines Canvas Component. 2032 * @since 8 2033 */ 2034/** 2035 * Defines Canvas Component. 2036 * @form 2037 * @since 9 2038 */ 2039declare const Canvas: CanvasInterface; 2040 2041/** 2042 * Defines Canvas Component instance. 2043 * @since 8 2044 */ 2045/** 2046 * Defines Canvas Component instance. 2047 * @form 2048 * @since 9 2049 */ 2050declare const CanvasInstance: CanvasAttribute; 2051