my.createCanvasContext(canvasId)
Create a drawing context for the canvas. This drawing context only works on the <canvas/>
of the corresponding canvasId
.
Parameters
Parameter | Type | Description |
---|---|---|
canvasId | String | ID defined on <canvas/> |
toTempFilePath
Export the contents of the current canvas to generate an image and return the file path.
Parameters
Parameter | Type | Required | Description | Lowest base library version supported |
---|---|---|---|---|
x | Number | No | X axis starting point of the canvas, the default value is 0. | - |
y | Number | No | Y axis starting point of the canvas, the default is 0. | - |
width | Number | No | Canvas width, the default value is canvas width - X. | - |
height | Number | No | Canvas height, the default value is canvas height - Y. | - |
destWidth | Number | No | Output image width, the default value is canvas width. | - |
destHeight | Number | No | Output image height, the default value is canvas height. | - |
fileType | String | No | Type of the target file. The legal values are jpg and png, and the default value is 1. The parameter is available in mPaaS 10.1.60 and later versions. | 1.10 |
quality | Number | No | Image quality. Currently, the parameter only works on jpg, and the value range is (0, 1]. The parameter is available in mPaaS 10.1.60 and later versions. | 1.10 |
success | Function | No | Interface callback succeeded. | - |
fail | Function | No | Interface callback failed. | - |
complete | Function | No | Interface callback completed. | - |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.toTempFilePath({
success() {},
});
setTextAlign
textAlign
is a property of Canvas 2D API that describes the alignment of text when it is drawn. Note that this alignment is based on the x value of CanvasRenderingContext2D.fillText
method. So, if textAlign
=”center”, then the text will be drawn at x-50%*width
.
Parameters
Parameter | Type | Definition |
---|---|---|
textAlign | String | Enumeration values: “left”, “right”, “center”, “start” and “end” |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextAlign("left");
ctx.fillText("Hello world", 0, 100);
setTextBaseline
textBaseline
is a property of Canvas 2D API that describes the baseline of text when it is drawn.
Parameters
Parameter | Type | Definition |
---|---|---|
textBaseline | String | Enumeration values: “top”, “hanging”, “middle”, “alphabetic”, “ideographic” and “bottom” |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setTextBaseline("top");
ctx.fillText("Hello world", 0, 100);
setFillStyle
Set the fill color.
If fillStyle
is not set, the default color is black
.
Parameters
Parameter | Type | Definition |
---|---|---|
color | Color | The color. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 100, 175);
ctx.draw();
setStrokeStyle
Set the border color.
If strokeStyle
is not set, the default color is black
.
Parameters
Parameter | Type | Definition |
---|---|---|
color | Color | The color. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(50, 50, 100, 175);
ctx.draw();
setShadow
Set the shadow style.
If not set, the default values of offsetX
, offsetY
and blur
are all 0, and the default value of color
is black
.
Parameters
Parameter | Type | Value range | Definition |
---|---|---|---|
offsetX | Number | The offset of the shadow relative to the horizontal direction of the shape | |
offsetY | Number | The offset of the shadow relative to the vertical direction of the shape | |
blur | Number | 0~100 | The blur level of the shadow, the larger the value, the more blurred |
color | Color | Shadow color |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('red');
ctx.setShadow(15, 45, 45, 'yellow');
ctx.fillRect(20, 20, 100, 175);
ctx.draw();
createLinearGradient
Create a linear gradient.
You need to use addColorStop()
to specify at least two gradientstops.
Parameters
Parameter | Type | Definition |
---|---|---|
x0 | Number | X coordinate of the starting point |
y0 | Number | Y coordinate of the starting point |
x1 | Number | X coordinate of the end point |
y1 | Number | Y coordinate of the end point |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createLinearGradient(10, 10, 150, 10);
grd.addColorStop(0, 'yellow');
grd.addColorStop(1, 'blue');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();
createCircularGradient
Create a circular gradient. The starting point is at the center of the circle and the end point is at the ring.
You need to use addColorStop()
to specify at least two gradientstops.
Parameters
Parameter | Type | Definition |
---|---|---|
x | Number | X coordinate of the center of circle |
y | Number | Y coordinate of the center of circle |
r | Number | Radius of circle |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createCircularGradient(90, 60, 60);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'red');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();
addColorStop
Create a color gradientstop.
Portions smaller than the minimum stop
are rendered in the color of the minimum stop
, and portions larger than the maximum stop
are rendered in the color of the maximum stop
.
You need to use addColorStop()
to specify at least two gradientstops.
Parameters
Parameter | Type | Definition |
---|---|---|
stop | Number | Indicates that the color gradientstop is positioned between the starting and end points, ranging from 0 to 1 |
color | Color | Color of gradientstop |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
const grd = ctx.createLinearGradient(40, 20, 230, 40);
grd.addColorStop(0.36, 'orange');
grd.addColorStop(0.56, 'cyan');
grd.addColorStop(0.63, 'yellow');
grd.addColorStop(0.76, 'blue');
grd.addColorStop(0.54, 'green');
grd.addColorStop(1, 'purple');
grd.addColorStop(0.4, 'red');
ctx.setFillStyle(grd);
ctx.fillRect(20, 20, 250, 180);
ctx.draw();
setLineWidth
Set the width of line.
Parameters
Parameter | Type | Description |
---|---|---|
lineWidth | Number | Line width, in px |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(250, 10);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(20, 35);
ctx.lineTo(250, 30);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(20);
ctx.moveTo(20, 50);
ctx.lineTo(250, 55);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(25);
ctx.moveTo(20, 80);
ctx.lineTo(250, 85);
ctx.stroke();
ctx.draw();
setLineCap
Set the end point style of line.
Parameters
Parameter | Type | Range | Description |
---|---|---|---|
lineCap | String | ‘round’, ‘butt’ and ‘square’ | End point style of line |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(20);
ctx.moveTo(20, 70);
ctx.lineTo(250, 80);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(25, 80);
ctx.lineTo(250, 30);
ctx.stroke();
ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(35, 47);
ctx.lineTo(230, 120);
ctx.stroke();
ctx.draw();
setLineJoin
Set the intersection style of line.
Parameters
Parameter | Type | Range | Description |
---|---|---|---|
lineJoin | String | ‘round’, ‘bevel’ and ‘miter’ | End intersection style of line |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(150, 70);
ctx.lineTo(20, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(20);
ctx.moveTo(100, 20);
ctx.lineTo(280, 80);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(20);
ctx.moveTo(60, 25);
ctx.lineTo(180, 80);
ctx.lineTo(90, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(15);
ctx.moveTo(130, 70);
ctx.lineTo(250, 50);
ctx.lineTo(230, 100);
ctx.stroke();
ctx.draw();
setMiterLimit
Set the maximum miter length which refers to the distance between the inner and outer corners at the intersection of two lines. Only valid when setLineJoin()
is miter. When the maximum miter length is exceeded, the intersection will be displayed by using bevel for lineJoin
.
Parameters
Parameter | Type | Description |
---|---|---|
miterLimit | Number | Maximum miter length |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
ctx.beginPath();
ctx.setLineWidth(15);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
ctx.draw();
rect
Create a rectangle.
Use fill()
or stroke()
method to draw a rectangle on the canvas.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of the top left corner of rectangle |
y | Number | Y coordinate of the top left corner of rectangle |
width | Number | Rectangular path width |
height | Number | Rectangular path height |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();
fillRect
Fill the rectangle.
Use setFillStyle()
to set the fill color of rectangle. If not set, default to black.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of the top left corner of rectangle |
y | Number | Y coordinate of the top left corner of rectangle |
width | Number | Rectangular path width |
height | Number | Rectangular path height |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.fillRect(20, 20, 250, 80);
ctx.setFillStyle('blue');
ctx.draw();
strokeRect
Draw a rectangle (not filled).
Use setFillStroke()
to set the color of rectangle line. If not set, the default is black.
Parameters
Parameter | Type | Range | Description |
---|---|---|---|
x | Number | X coordinate of the top left corner of rectangle | |
y | Number | Y coordinate of the top left corner of rectangle | |
width | Number | Rectangular path width | |
height | Number | Rectangular path height |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(20, 20, 250, 80);
ctx.draw();
clearRect
Clear the content within this rectangular area on the canvas.
clearRect
It will clear the rectangular instead of drawing a white rectangle. In order to intuitively understand this operation, you can add a layer of background color to the canvas.
<canvas id="awesomeCanvas" style="border: 1px solid; background: red;"/>
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of the top left corner of rectangle |
y | Number | Y coordinate of the top left corner of rectangle |
width | Number | Rectangular width |
height | Number | Rectangular height |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(250, 10, 250, 200);
ctx.setFillStyle('yellow');
ctx.fillRect(0, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();
fill
Fill the contents of the current path. The default fill color is black.
If the current path is not closed, the
fill()
method will connect the starting and end points and then fill them. See sample 1 for details.For
fill()
, the fill path is calculated frombeginPath()
, butfillRect()
is not included. See sample 2 for details.
Code sample
Sample 1
const ctx = my.createCanvasContext('awesomeCanvas')
ctx.moveTo(20, 20)
ctx.lineTo(200, 20)
ctx.lineTo(200, 200)
ctx.fill()
ctx.draw()
Sample 2
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 110, 40);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.rect(20, 30, 150, 40);
ctx.setFillStyle('yellow');
ctx.fillRect(20, 80, 150, 40);
ctx.rect(20, 150, 150, 40);
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();
stroke
Draw the border of the current path, the default is black.
stroke()
The drawn path is calculated from beginPath()
, but strokeRect()
is not included. See sample 2 for details.
Code example
Sample 1
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 10);
ctx.lineTo(150, 150);
ctx.stroke();
ctx.draw();
Sample 2
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(10, 10, 100, 30);
ctx.setStrokeStyle('blue');
ctx.stroke();
ctx.beginPath();
ctx.rect(20, 50, 150, 50);
ctx.setStrokeStyle('yellow');
ctx.strokeRect(15, 75, 200, 35);
ctx.rect(20, 200, 150, 30);
ctx.setStrokeStyle('red');
ctx.stroke();
ctx.draw();
beginPath
To start creating a path, you need to call fill
or stroke
to use the path to fill or draw.
At the very beginning, it is equivalent to calling
beginPath()
once.If you set
setFillStyle()
,setStrokeStyle()
orsetLineWidth()
multiple times within the same path, the last setting will prevail.
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 150, 50);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.rect(20, 50, 150, 40);
ctx.setFillStyle('yellow');
ctx.fillRect(20, 170, 150, 40);
ctx.rect(10, 100, 100, 30);
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();
closePath
Close a path.
Closing a path will connect the starting and end points.
If
fill()
orstroke()
is not called after the path is closed and a new path is created, the previous path will not be rendered.
Code example
- Sample 1
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 20);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.stroke();
ctx.draw();
Sample 2
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rect(20, 20, 150, 50);
ctx.closePath();
ctx.beginPath();
ctx.rect(20, 50, 150, 40);
ctx.setFillStyle('red');
ctx.fillRect(20, 80, 120, 30);
ctx.rect(20, 150, 150, 40);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();
moveTo
Move the path to a specified position on the canvas without creating a line.
Use the stroke()
method to draw lines.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of target position |
y | Number | Y coordinate of target position |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.lineTo(150, 15);
ctx.moveTo(20, 55);
ctx.lineTo(120, 60);
ctx.stroke();
ctx.draw();
lineTo
Add a new position with the lineTo
method and then create a line from the last specified position to the target position.
Use the stroke()
method to draw lines.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of target position |
y | Number | Y coordinate of target position |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.moveTo(20, 20);
ctx.rect(20, 20, 80, 30);
ctx.lineTo(120, 80);
ctx.stroke();
ctx.draw();
arc
Draw an arc.
To create a circle, you can use the
arc()
method to specify a starting radian of 0 and a ending radian of2 * Math.PI
.Use the
stroke()
orfill()
method to draw an arc on the canvas.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | X coordinate of circle |
y | Number | Y coordinate of circle |
r | Number | Radius of circle |
sAngle | Number | Start radian, in degrees (at 3 o’clock) |
eAngle | Number | End radian |
counterclockwise | Boolean | Optional, specify whether the direction of the radian is counterclockwise or clockwise. The default value is false. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.arc(200, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#CCCCCC');
ctx.fill();
ctx.beginPath();
ctx.moveTo(50, 65);
ctx.lineTo(170, 80);
ctx.moveTo(200, 35);
ctx.lineTo(200, 235);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
ctx.setFontSize(12);
ctx.setFillStyle('yellow');
ctx.fillText('0', 165, 78);
ctx.fillText('0.6*PI', 96, 148);
ctx.fillText('1*PI', 15, 57);
ctx.fillText('1.7*PI', 94, 20);
ctx.beginPath();
ctx.arc(200, 85, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(200, 35, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.beginPath();
ctx.arc(450, 60, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(150, 35, 50, 0, 1.8 * Math.PI);
ctx.setStrokeStyle('#666666');
ctx.stroke();
ctx.draw();
The three key coordinates for arc(150, 35, 50, 0, 1.8 * Math.PI)
are as follows:
- Green: Center of circle (15, 35)
- Red: Start radian (0)
- Blue: End radian (1.8 * Math.PI)
bezierCurveTo
Create a cubic Bezier curve path.
The starting point of the curve is the previous point in the path.
Parameters
Parameter | Type | Description |
---|---|---|
cp1x | Number | X coordinate of the first Bezier control point |
cp1y | Number | Y coordinate of the first Bezier control point |
cp2x | Number | X coordinate of the second Bezier control point |
cp2y | Number | Y coordinate of the second Bezier control point |
x | Number | X coordinate of the end point |
y | Number | Y coordinate of the end point |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(250, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(20, 100, 2, 0, 2 * Math.PI);
ctx.arc(200, 100, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.setFillStyle('yellow');
ctx.setFontSize(14);
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 100);
ctx.lineTo(150, 75);
ctx.moveTo(250, 30);
ctx.lineTo(250, 80);
ctx.lineTo(70, 75);
ctx.setStrokeStyle('#EEEEEE');
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(30, 150, 250, 150, 180, 20);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();
For moveTo(30, 30)
, the three key coordinates for bezierCurveTo(30, 150, 250, 150, 180, 20)
are as follows:
- Red: Start point (20, 20)
- Blue: Two control points (20, 150) and (250, 150)
- Green: End point (180, 20)
clip
Set the currently created path to the current clipping path.
quadraticCurveTo
Create a quadratic Bezier curve path.
The starting point of the curve is the previous point in the path.
Parameters
Parameter | Type | Description |
---|---|---|
cpx | Number | X coordinate of Bezier control point |
cpy | Number | Y coordinate of Bezier control point |
x | Number | X coordinate of the end point |
y | Number | Y coordinate of the end point |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.beginPath();
ctx.arc(30, 30, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(250, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.beginPath();
ctx.arc(30, 200, 2, 0, 2 * Math.PI);
ctx.setFillStyle('green');
ctx.fill();
ctx.setFillStyle('black');
ctx.setFontSize(12);
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(30, 150);
ctx.lineTo(250, 30);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.quadraticCurveTo(30, 150, 250, 25);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();
For moveTo(30, 30)
, the three key coordinates for quadraticCurveTo(30, 150, 250, 25)
are as follows:
- Red: Start point (30, 30)
- Blue: Control point (30, 150)
- Green: End point (250, 25)
scale
After the scale
method is called, the horizontal and vertical coordinates for the path created afterwards will be scaled. If scale
is called multiple times, scale levels will be multiplied.
Parameters
Parameter | Type | Description |
---|---|---|
scaleWidth | Number | Scale levels for horizontal coordinates (1 = 100%, 0.5 = 50%, 2 = 200%) |
scaleHeight | Number | Scale levels for vertical coordinates (1 = 100%, 0.5 = 50%, 2 = 200%) |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);
ctx.scale(3, 3);
ctx.strokeRect(15, 15, 30, 25);
ctx.draw();
rotate
Centered on the origin, and the origin can be modified with the translate method. Rotate the current axis clockwise. If rotate
is called multiple times, the rotation angles will be added up.
Parameters
Parameter | Type | Description |
---|---|---|
rotate | Number | Rotation angle in radians (degrees * Math.PI/180; degrees ranging from 0~360) |
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);
ctx.rotate(30 * Math.PI / 180);
ctx.strokeRect(200, 20, 180, 150);
ctx.draw();
translate
Transform the origin (0, 0) of the current coordinate system. The default origin of the coordinate system is the top left corner of the page.
Parameters
Parameter | Type | Description |
---|---|---|
x | Number | Settoff for horizontal coordinate |
y | Number | Settoff for vertical coordinate |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);
ctx.translate(30, 30);
ctx.strokeRect(20, 20, 250, 80);
ctx.draw();
setFontSize
Set the font size.
Parameters
Parameter | Type | Description |
---|---|---|
fontSize | Number | Font size |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFontSize(14);
ctx.fillText('14', 20, 20);;;
ctx.setFontSize(22)
ctx.fillText('22', 40, 40)
ctx.setFontSize(30);
ctx.fillText('30', 60, 60);
ctx.setFontSize(38);
ctx.fillText('38', 90, 90);
ctx.draw();
fillText
Draw the filled text on the canvas.
Parameters
Parameter | Type | Description |
---|---|---|
text | String | Text |
x | Number | X coordinate of the top left corner of the drawn text |
y | Number | Y coordinate of the top left corner of the drawn text |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFontSize(42)
ctx.fillText('Hello', 30, 30);;
ctx.fillText('alipay', 200, 200)
ctx.draw();
drawImage
Draw an image and the image remains in its original size.
Parameters
Parameter | Type | Description |
---|---|---|
imageResource | String | Image resources; only support online CDN address or offline package address, and the online CDN needs to return header Access-Control-Allow-Origin: * . |
x | Number | X coordinate of the top left corner of image |
y | Number | Y coordinate of the top left corner of image |
width | Number | Image width |
height | Number | Image height |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.drawImage('https://img.alicdn.com/tfs/TB1GvVMj2BNTKJjy0FdXXcPpVXa-520-280.jpg', 2, 2, 250, 80);
ctx.draw();
setGlobalAlpha
Set global brush transparency.
Parameters
Parameter | Type | Range | Description |
---|---|---|---|
alpha | Number | 0~1 | Transparency, 0 indicates completely transparent; 1 indicates opaque. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('yellow');
ctx.fillRect(10, 10, 150, 100);
ctx.setGlobalAlpha(0.2);
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 150, 100);
ctx.setFillStyle('red');
ctx.fillRect(100, 100, 150, 100);
ctx.draw();
setLineDash
Set the style of dash line.
Parameters
Parameter | Type | Description |
---|---|---|
segments | Array |
A set of numbers describing the length of alternately drawn line segments and spacing (units of coordinate space). If the number of array elements is odd, the array elements are copied and repeated. For example, the [5, 15, 25] will be changed to [5, 15, 25, 5, 15, 25]. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setLineDash([5, 15, 25]);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw();
transform
A method in which a matrix is superimposed multiple times on the current transformation, and the matrix is described by the parameters of the method. You can scale, rotate, move, and tilt the context.
Parameters
Parameter | Type | Description | |
---|---|---|---|
scaleX | Number | Scale horizontally. | |
skewX | Number | Skew horizontally. | |
skewY | Number | Skew vertically. | |
scaleY | Number | Scale vertically. | |
translateX | Number | Translate horizontally. | |
translateY | Number | Translate vertically. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);
ctx.transform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);
ctx.draw();
setTransform
Reset the transform and invoke the transform by unit matrix. The transform is described by the variable of the method.
Parameters
Parameter | Type | Description |
---|---|---|
scaleX | Number | Scale horizontally. |
skewX | Number | Skew horizontally. |
skewY | Number | Skew vertically. |
scaleY | Number | Scale vertically. |
translateX | Number | Translate horizontally. |
translateY | Number | Translate vertically. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.rotate(45 * Math.PI / 180);
ctx.setFillStyle('red');
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 1, 0, 1, 0, 0);
ctx.setFillStyle('#000');
ctx.fillRect(0, 0, 100, 100);
ctx.draw();
getImageData
Get the pixel data of the implicit area of the canvas.
Parameters
Parameter | Type | Required | Description |
---|---|---|---|
x | Number | Yes | The x coordinate of left-upper corner of the image rectangular area that need to be get. |
y | Number | Yes | The y coordinate of left-upper corner of the image rectangular area that need to be get. |
width | Number | Yes | The width of the image rectangular area that need to be gotten. |
height | Number | Yes | The height of the image rectangular area that need to be gotten. |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion. |
Callback parameters on success
Parameter | Type | Description |
---|---|---|
width | Number | The width of the image rect area. |
height | Number | The height of the image rect area. |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.getImageData({
x: 0,
y: 0,
width: 100,
height: 100,
success(res) {
console.log(res.width) // 100
console.log(res.height) // 100
console.log(res.data instanceof Uint8ClampedArray) // true
console.log(res.data.length) // 100 * 100 * 4
}
})
putImageData
Draw the pixel data into the canvas.
Parameters
Parameter | Type | Required | Description |
---|---|---|---|
data | Uint8ClampedArray | Yes | Image pixel data, it is an array, and the four elements represent the rgba data. |
x | Number | Yes | The x offset for the original image data in the destination canvas. |
y | Number | Yes | The y offset for the original image data in the destination canvas. |
width | Number | Yes | The width of the original image data. |
height | Number | Yes | The height of the original image data. |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion. |
Code example
const data = new Uint8ClampedArray([255, 0, 0, 1])
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.putImageData({
x: 0,
y: 0,
width: 1,
height: 1,
data: data,
success(res) {}
})
save
Save the current drawing context.
Code example
//.js
const ctx = my.createCanvasContext('myCanvas')
// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)
ctx.draw()
restore
Restore the previously saved drawing context.
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.save();
ctx.setFillStyle('red');
ctx.fillRect(20, 20, 250, 80);
ctx.restore();
ctx.fillRect(60, 60, 155, 130);
ctx.draw();
draw
Draw the description (path, transformation, style) previously existed in the drawing context onto the canvas.
The drawing context needs to be created by my.createCanvasContext(canvasId)
.
Parameters
Parameter | Type | Description | Lowest base library version supported |
---|---|---|---|
reserve | Boolean | Optional. Whether this drawing will follow the last drawing; that is, if the reserve parameter is false, the native layer will clear the canvas first and then continue drawing by calling drawCanvas ; if the reserve parameter is true, the content on the current canvas is retained and then drawCanvas is called to override it. The default is false. |
- |
callback | Function | Required, the callback function to be executed when the drawing is done. | 1.10 |
Code example
const ctx = my.createCanvasContext('awesomeCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(20, 20, 180, 80);
ctx.draw();
ctx.fillRect(60, 60, 250, 120);
ctx.draw(true);