代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
CanvasRenderingContext2D allows you to draw rectangles, text, images, and other objects on a canvas.
Example
<!-- xxx.hml -->
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// xxx.js
export default {
handleClick() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
},
}
Fills a rectangle on the canvas.
Parameter
Return Value
N/A
Example
ctx.fillRect(20, 20, 200, 150);
Sets the style to fill an area.
Parameter
Return Value
N/A
Example
ctx.fillStyle = '#0000ff';
ctx.fillRect(20, 20, 150, 100);
Clears the content in a rectangle on the canvas.
Parameter
Return Value
N/A
Example
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 400, 200);
ctx.clearRect(20, 20, 150, 100);
Draws a rectangle stroke on the canvas.
Parameter
|
X-coordinate of the upper left corner of the rectangle stroke |
||
|
Y-coordinate of the upper left corner of the rectangle stroke |
||
Return Value
N/A
Example
ctx.strokeRect(30, 30, 200, 150);
Draws filled text on the canvas.
Parameter
Return Value
N/A
Example
ctx.font = '35px sans-serif';
ctx.fillText("Hello World!", 20, 60);
Draws a text stroke on the canvas.
Parameter
Return Value
N/A
Example
ctx.font = '25px sans-serif';
ctx.strokeText("Hello World!", 20, 60);
Returns a TextMetrics object used to obtain the width of specified text.
Parameter
Return Value
|
Object that contains the text width. You can obtain the width by TextMetrics.width. |
Example
ctx.font = '25px sans-serif';
var txt = 'Hello World';
ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
ctx.fillText(txt, 20, 110);
Sets the width of a line.
Parameter
Return Value
N/A
Example
ctx.lineWidth = 5;
ctx.strokeRect(25, 25, 85, 105);
Sets the stroke style.
Parameter
Return Value
N/A
Example
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.strokeRect(25, 25, 155, 105);
Draws a stroke.
Parameter
N/A
Return Value
N/A
Example
ctx.moveTo(25, 25);
ctx.lineTo(25, 105);
ctx.strokeStyle = 'rgb(0,0,255)';
ctx.stroke();
Creates a drawing path.
Parameter
N/A
Return Value
N/A
Example
ctx.beginPath();
ctx.lineWidth = '6';
ctx.strokeStyle = '#0000ff';
ctx.moveTo(15, 80);
ctx.lineTo(280, 160);
ctx.stroke();
Moves a drawing path to a target position on the canvas.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(280, 160);
ctx.stroke();
Connects the current point to a target position using a straight line.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(280, 160);
ctx.stroke();
Draws a closed path.
Parameter
N/A
Return Value
N/A
Example
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(110, 30);
ctx.lineTo(70, 90);
ctx.closePath();
ctx.stroke();
Sets the style of line endpoints.
Parameter
|
Style of line endpoints. Available values include: |
Return Value
N/A
Example
ctx.lineWidth = 8;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(30, 50);
ctx.lineTo(220, 50);
ctx.stroke();
Sets the style for the point where two lines intersect.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineJoin = 'miter';
ctx.moveTo(30, 30);
ctx.lineTo(120, 60);
ctx.lineTo(30, 110);
ctx.stroke();
Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
Parameter
Return Value
N/A
Example
ctx.lineWidth = 8;
ctx.lineJoin = 'miter';
ctx.miterLimit = 3;
ctx.moveTo(30, 30);
ctx.lineTo(60, 35);
ctx.lineTo(30, 37);
ctx.stroke();
Sets the font style.
Parameter
Return Value
N/A
Example
ctx.font = '30px sans-serif';
ctx.fillText("Hello World", 20, 60);
Sets the text alignment mode.
Parameter
|
Text alignment mode. Available values include: |
Return Value
N/A
Example
ctx.strokeStyle = '#0000ff';
ctx.moveTo(140, 10);
ctx.lineTo(140, 160);
ctx.stroke();
ctx.font = '18px sans-serif';
// Show the textAlign values.
ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60);
ctx.textAlign = 'end';
ctx.fillText('textAlign=end', 140, 80);
ctx.textAlign = 'left';
ctx.fillText('textAlign=left', 140, 100);
ctx.textAlign = 'center';
ctx.fillText('textAlign=center',140, 120);
ctx.textAlign = 'right';
ctx.fillText('textAlign=right',140, 140);
Sets a text baseline in the horizontal direction for text alignment.
Parameter
Return Value
N/A
Example
ctx.strokeStyle = '#0000ff';
ctx.moveTo(0, 120);
ctx.lineTo(400, 120);
ctx.stroke();
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom';
ctx.fillText('Bottom', 55, 120);
ctx.textBaseline = 'middle';
ctx.fillText('Middle', 125, 120);
ctx.textBaseline = 'alphabetic';
ctx.fillText('Alphabetic', 195, 120);
ctx.textBaseline = 'hanging';
ctx.fillText('Hanging', 295, 120);
Creates a pattern for image filling based on a specified source image and repetition mode.
Parameter
|
Source image. For details, see Image. |
||
|
Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat". |
Return Value
Example
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 20, 20);
Draws a cubic bezier curve on the canvas.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
Draws a quadratic curve on the canvas.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 200, 20);
ctx.stroke();
Draws an arc on the canvas.
Parameter
Return Value
N/A
Example
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
Draws an arc based on the radius and points on the arc.
Parameter
Return Value
N/A
Example
ctx.moveTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc.
ctx.stroke();
Creates a rectangle.
Parameter
Return Value
N/A
Example
ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
ctx.stroke(); // Draw it
Fills the area inside a closed path.
Parameter
N/A
Return Value
N/A
Example
ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20).
ctx.fill(); // Fill the rectangle using default settings.
Sets the current path to a clipping path.
Parameter
N/A
Return Value
N/A
Example
ctx.rect(0, 0, 200, 200);
ctx.stroke();
ctx.clip();
// Clip a rectangle and fill it with red paint.
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0, 0, 150, 150);
Rotates a canvas clockwise around its coordinate axes.
Parameter
|
Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian. |
Return Value
N/A
Example
ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees.
ctx.fillRect(70, 20, 50, 50);
Scales a canvas based on scaling factors.
Parameter
Return Value
N/A
Example
ctx.strokeRect(10, 10, 25, 25);
ctx.scale(2, 2);// Set a 200% scale factor for the rectangle.
ctx.strokeRect(10, 10, 25, 25);
Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
NOTE: The following formulas calculate coordinates of the transformed graph. x and y represent coordinates before transformation, and x' and y' represent coordinates after transformation.
- x' = scaleX * x + skewY * y + translateX
- y' = skewX * x + scaleY * y + translateY
Parameter
Return Value
N/A
Example
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, 100, 100)
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100);
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 100);
Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the transform() function.
Parameter
Return Value
N/A
Example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100)
ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 100);
Moves the origin of the coordinate system.
Parameter
Return Value
N/A
Example
ctx.fillRect(10, 10, 50, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 50, 50);
Sets the alpha value.
Parameter
|
Global alpha value to set. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). |
Return Value
N/A
Example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 50, 50);
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
Draws an image.
Parameter
|
Image resource. For details, see Image. |
||
|
X-coordinate of the upper left corner of the rectangle used to crop the source image. |
||
|
Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
||
|
X-coordinate of the upper left corner of the drawing area on the canvas. |
||
|
Y-coordinate of the upper left corner of the drawing area on the canvas. |
||
Return Value
N/A
Example
var test = this.$element('drawImage');
var ctx = test.getContext('2d');
var img = new Image();
img.src = 'common/image/test.jpg';
ctx.drawImage(img, 50, 80, 80, 80);
Restores the saved drawing context.
Parameter
N/A
Return Value
N/A
Example
ctx.restore();
Saves the current drawing context.
Parameter
N/A
Return Value
N/A
Example
ctx.save();
Creates a linear gradient. A CanvasGradient object is returned. For details, see CanvasGradient.
Parameter
Return Value
Example
<!-- xxx.hml -->
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// xxx.js
export default {
handleClick() {
const el = this.$refs.canvas;
const ctx = el.getContext('2d');
// Linear gradient: start(50,0) end(300,100)
var gradient = ctx.createLinearGradient(50,0, 300,100);
// Add three color stops
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1.0, 'green');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);
}
}
Creates an ImageData object. For details, see ImageData.
Parameter
|
ImageData object with the same width and height copied from the original ImageData object |
Return Value
Example
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
ImageData object created with pixels in the specified area on the canvas.
Parameter
Return Value
|
ImageData object that contains pixels in the specified area on the canvas |
Example
var test = this.$element('getImageData');
var ctx = test.getContext('2d');
var imageData = ctx.getImageData(0, 0, 280, 300);
Puts the ImageData onto a rectangular area on the canvas.
Parameter
|
X-axis offset of the upper left corner of the rectangular area relative to that of the source image |
||
|
Y-axis offset of the upper left corner of the rectangular area relative to that of the source image |
||
Return Value
N/A
Example
var test = this.$element('putImageData');
var ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);
Sets the dash line style.
Parameter
|
An array describing the interval of alternate line segments and length of spacing |
Return Value
N/A
Example
ctx.setLineDash([10,20]);
Obtains the dash line style.
Parameter
N/A
Return Value
|
Interval of alternate line segments and the length of spacing |
Example
var info = ctx.getLineDash();
Sets the dash line offset.
Parameter
|
Dash line offset. The value is a floating point number starting from 0.0. |
Return Value
N/A
Example
ctx.lineDashOffset = 1.0;
Sets the composite operation type.
Parameter
Attribute
Return Value
N/A
Example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 50, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(120, 20, 50, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(150, 50, 50, 50);
In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
Sets the shadow blur degree.
Parameter
|
Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0. |
Return Value
N/A
Example
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 100, 80);
Sets the shadow color.
Parameter
Return Value
N/A
Example
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,255)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(30, 30, 100, 100);
Sets the x-axis shadow offset relative to the original object.
Parameter
Return Value
N/A
Example
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 100, 80);
Sets the y-axis shadow offset relative to the original object.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
