HarmonyOS API：CanvasRenderingContext2D对象

joytrian

发布于 2023-3-29 21:09

浏览

0收藏

版本：v3.1 Beta

CanvasRenderingContext2D对象

方法

fillRect

fillRect(x: number, y: number, width:number, height: number): void

填充一个矩形。

参数：

参数	类型	描述
x	number	指定矩形左上角点的x坐标。
y	number	指定矩形左上角点的y坐标。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

示例：

  <!-- xxx.hml -->
  <div>
    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  </div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillRect(20, 20, 200, 150);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

clearRect

clearRect(x: number, y: number, width:number, height: number): void

删除指定区域内的绘制内容。

参数：

参数	类型	描述
x	number	指定矩形上的左上角x坐标。
y	number	指定矩形上的左上角y坐标。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = 'rgb(0,0,255)';
    ctx.fillRect(0, 0, 400, 200);
    ctx.clearRect(20, 20, 150, 100);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

strokeRect

strokeRect(x: number, y: number, width:number, height: number): void

绘制具有边框的矩形，矩形内部不填充。

参数：

参数	类型	描述
x	number	指定矩形的左上角x坐标。
y	number	指定矩形的左上角y坐标。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeRect(30, 30, 200, 150);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

fillText

fillText(text: string, x: number, y: number): void

绘制填充类文本。

参数：

参数	类型	描述
text	string	需要绘制的文本内容。
x	number	需要绘制的文本的左下角x坐标。
y	number	需要绘制的文本的左下角y坐标。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '35px sans-serif';
    ctx.fillText("Hello World!", 10, 60);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

strokeText

strokeText(text: string, x: number, y: number): void

绘制描边类文本。

参数：

参数	类型	描述
text	string	需要绘制的文本内容。
x	number	需要绘制的文本的左下角x坐标。
y	number	需要绘制的文本的左下角y坐标。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '25px sans-serif';
    ctx.strokeText("Hello World!", 10, 60);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

measureText

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。

参数：

参数	类型	描述
text	string	需要进行测量的文本。

返回值：

类型	说明
TextMetrics	包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '20px sans-serif';
    var txt = 'Hello World';
    ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
    ctx.fillText(txt, 20, 110);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

stroke

stroke(): void

进行边框绘制操作。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.moveTo(25, 25);
    ctx.lineTo(25, 250);
    ctx.lineWidth = '6';
    ctx.strokeStyle = 'rgb(0,0,255)';
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

beginPath

beginPath(): void

创建一个新的绘制路径。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();              
    ctx.lineWidth = '6';
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(15, 80); 
    ctx.lineTo(280, 80);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

moveTo

moveTo(x: number, y: number): void

路径从当前点移动到指定点。

参数：

参数	类型	描述
x	number	指定位置的x坐标。
y	number	指定位置的y坐标。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(280, 160);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

lineTo

lineTo(x: number, y: number): void

从当前点到指定点进行路径连接。

参数：

参数	类型	描述
x	number	指定位置的x坐标。
y	number	指定位置的y坐标。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(280, 160);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

closePath

closePath(): void

结束当前路径形成一个封闭路径。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(110, 30);
    ctx.lineTo(70, 90);
    ctx.closePath();
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

createPattern

createPattern(image: Image, repetition: string): Object

通过指定图像和重复方式创建图片填充的模板。

参数：

参数	类型	描述
image	Image	图源对象，具体参考Image对象。
repetition	string	设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

返回值：

类型	说明
Object	指定图像填充的Pattern对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var img = new Image();
    img.src = 'common/images/example.jpg';
    var pat = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pat;
    ctx.fillRect(0, 0, 500, 500);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

创建三次贝赛尔曲线的路径。

参数：

参数	类型	描述
cp1x	number	第一个贝塞尔参数的x坐标值。
cp1y	number	第一个贝塞尔参数的y坐标值。
cp2x	number	第二个贝塞尔参数的x坐标值。
cp2y	number	第二个贝塞尔参数的y坐标值。
x	number	路径结束时的x坐标值。
y	number	路径结束时的y坐标值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

创建二次贝赛尔曲线的路径。

参数：

参数	类型	描述
cpx	number	贝塞尔参数的x坐标值。
cpy	number	贝塞尔参数的y坐标值。
x	number	路径结束时的x坐标值。
y	number	路径结束时的y坐标值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.quadraticCurveTo(100, 100, 200, 20);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): void

绘制弧线路径。

参数：

参数	类型	描述
x	number	弧线圆心的x坐标值。
y	number	弧线圆心的y坐标值。
radius	number	弧线的圆半径。
startAngle	number	弧线的起始弧度。
endAngle	number	弧线的终止弧度。
anticlockwise	boolean	是否逆时针绘制圆弧。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

依据圆弧经过的点和圆弧半径创建圆弧路径。

参数：

参数	类型	描述
x1	number	圆弧经过的第一个点的x坐标值。
y1	number	圆弧经过的第一个点的y坐标值。
x2	number	圆弧经过的第二个点的x坐标值。
y2	number	圆弧经过的第二个点的y坐标值。
radius	number	圆弧的圆半径值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.moveTo(100, 20);
    ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

ellipse⁶⁺

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void

在规定的矩形区域绘制一个椭圆。

参数：

参数	类型	描述
x	number	椭圆圆心的x轴坐标。
y	number	椭圆圆心的y轴坐标。
radiusX	number	椭圆x轴的半径长度。
radiusY	number	椭圆y轴的半径长度。
rotation	number	椭圆的旋转角度，单位为弧度。
startAngle	number	椭圆绘制的起始点角度，以弧度表示。
endAngle	number	椭圆绘制的结束点角度，以弧度表示。
anticlockwise	number	是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

rect

rect(x: number, y: number, width: number, height: number): void

创建矩形路径。

参数：

参数	类型	描述
x	number	指定矩形的左上角x坐标值。
y	number	指定矩形的左上角y坐标值。
width	number	指定矩形的宽度。
height	number	指定矩形的高度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
    ctx.stroke(); // Draw it
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

fill

fill(): void

对封闭路径进行填充。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
    ctx.fill(); // Draw it in default setting
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

clip

clip(): void

设置当前路径为剪切路径。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rect(0, 0, 200, 200);
    ctx.stroke();
    ctx.clip();
    // Draw red rectangle after clip
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect(0, 0, 150, 150);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

rotate

rotate(rotate: number): void

针对当前坐标轴进行顺时针旋转。

参数：

参数	类型	描述
rotate	number	设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
    ctx.fillRect(70, 20, 50, 50);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

scale

scale(x: number, y: number): void

设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。

参数：

参数	类型	描述
x	number	设置水平方向的缩放值。
y	number	设置垂直方向的缩放值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeRect(10, 10, 25, 25);
    ctx.scale(2, 2);// Scale to 200%
    ctx.strokeRect(10, 10, 25, 25);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

transform

transform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void

transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。

说明

变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
x' = scaleX * x + skewY * y + translateX
y' = skewX * x + scaleY * y + translateY

参数：

参数	类型	描述
scaleX	number	指定水平缩放值。
skewX	number	指定水平倾斜值。
skewY	number	指定垂直倾斜值。
scaleY	number	指定垂直缩放值。
translateX	number	指定水平移动值。
translateY	number	指定垂直移动值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    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);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

setTransform

setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void

setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。

参数：

参数	类型	描述
scaleX	number	指定水平缩放值。
skewX	number	指定水平倾斜值。
skewY	number	指定垂直倾斜值。
scaleY	number	指定垂直缩放值。
translateX	number	指定水平移动值。
translateY	number	指定垂直移动值。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    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);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

translate

translate(x: number, y: number): void

移动当前坐标系的原点。

参数：

参数	类型	描述
x	number	设置水平平移量。
y	number	设置竖直平移量。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillRect(10, 10, 50, 50);
    ctx.translate(70, 70);
    ctx.fillRect(10, 10, 50, 50);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

createPath2D⁶⁺

createPath2D(path: Path2D, cmds: string): Path2D

创建一个Path2D对象。

参数：

参数	类型	描述
path	Path2D	Path2D对象。
cmds	string	SVG的Path描述字符串。

返回值：

Path2D对象

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var path1 = ctx.createPath2D();
    path1.moveTo(100, 100);
    path1.lineTo(200, 100);
    path1.lineTo(100, 200);
    path1.closePath();
    ctx.stroke(path1);
    var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z");
    ctx.stroke(path2);
    var path3 = ctx.createPath2D(path2);
    ctx.stroke(path3);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

drawImage

drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void

进行图像绘制。

参数：

参数	类型	描述
image	Image \| PixelMap⁹⁺	图片资源，请参考Image对象或PixelMap对象。
sx	number	裁切源图像时距离源图像左上角的x坐标值。
sy	number	裁切源图像时距离源图像左上角的y坐标值。
sWidth	number	裁切源图像时需要裁切的宽度。
sHeight	number	裁切源图像时需要裁切的高度。
dx	number	绘制区域左上角在x轴的位置。
dy	number	绘制区域左上角在y 轴的位置。
dWidth	number	绘制区域的宽度。
dHeight	number	绘制区域的高度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    var test = this.$refs.canvas;
    var ctx = test.getContext('2d');
    var img = new Image();
    img.src = 'common/image/test.jpg';
    ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

restore

restore(): void

对保存的绘图上下文进行恢复。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.restore();
  }
}

save

save(): void

对当前的绘图上下文进行保存。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.save();
  }
}

createLinearGradient⁶⁺

createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object

创建一个线性渐变色，返回CanvasGradient对象，请参考CanvasGradient对象。

参数：

参数	类型	描述
x0	number	起点的x轴坐标。
y0	number	起点的y轴坐标。
x1	number	终点的x轴坐标。
y1	number	终点的y轴坐标。

返回值：

类型	说明
Object	返回创建的CanvasGradient对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>

// 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);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

createRadialGradient⁶⁺

createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Object

创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient

参数：

参数	类型	描述
x0	number	起始圆的x轴坐标。
y0	number	起始圆的y轴坐标。
r0	number	起始圆的半径。必须是非负且有限的。
x1	number	终点圆的x轴坐标。
y1	number	终点圆的y轴坐标。
r1	number	终点圆的半径。必须为非负且有限的。

返回值：

类型	说明
Object	返回创建的CanvasGradient对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>

// xxx.js
export default {
  handleClick() {
    const el = this.$refs.canvas;
    const ctx = el.getContext('2d');
    // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
    var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
    // 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);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

createImageData

createImageData(width: number, height: number, imageData: Object): Object

创建新的ImageData 对象，请参考ImageData对象。

参数：

参数	类型	描述
width	number	ImageData的宽度。
height	number	ImageData的高度。
imagedata	Object	复制现有的ImageData对象。

返回值：

类型	说明
Object	返回创建的ImageData对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
    var newImageData = ctx.createImageData(imageData);  // Create ImageData using the input imageData
  }
}

getImageData

getImageData(sx: number, sy: number, sw: number, sh: number): Object

以当前canvas指定区域内的像素创建ImageData对象。

参数：

参数	类型	描述
sx	number	需要输出的区域的左上角x坐标。
sy	number	需要输出的区域的左上角y坐标。
sw	number	需要输出的区域的宽度。
sh	number	需要输出的区域的高度。

返回值：

类型	说明
Object	返回包含指定区域像素的ImageData对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const test = this.$element('getImageData')
    const ctx = test.getContext('2d');
    var imageData = ctx.getImageData(0, 0, 280, 300);
  }
}

putImageData

putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void

使用ImageData数据填充新的矩形区域。

参数：

参数	类型	描述
imagedata	Object	包含像素值的ImageData对象。
dx	number	填充区域在x轴方向的偏移量。
dy	number	填充区域在y轴方向的偏移量。
dirtyX	number	源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。
dirtyY	number	源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。
dirtyWidth	number	源图像数据矩形裁切范围的宽度。
dirtyHeight	number	源图像数据矩形裁切范围的高度。

示例：

<!-- xxx.hml -->
<div>
  <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const test = this.$element('getImageData')
    const 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);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

getPixelMap⁹⁺

getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap

获取用当前canvas指定区域内的像素创建的PixelMap对象。

参数：

参数	类型	描述
sx	number	指定区域的左上角x坐标。
sy	number	指定区域的左上角y坐标。
sw	number	指定区域的宽度。
sh	number	指定区域的高度。

返回值：

类型	说明
PixelMap	返回包含指定区域像素的PixelMap对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas id="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const test = this.$element('canvasId')
    const ctx = test.getContext('2d');
    var pixelMap = ctx.getPixelMap(0, 0, 280, 300);
  }
}

setLineDash

setLineDash(segments: Array): void

设置画布的虚线样式。

参数：

参数	类型	描述
segments	Array	作为数组用来描述线段如何交替和间距长度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.setLineDash([10,20]);
    ctx.stroke();
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

getLineDash

getLineDash(): Array

获得当前画布的虚线样式。

返回值：

类型	说明
Array	返回数组，该数组用来描述线段如何交替和间距长度。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var info = ctx.getLineDash();
  }
}

transferFromImageBitmap⁷⁺

transferFromImageBitmap(bitmap: ImageBitmap): void

显示给定的ImageBitmap对象。

参数：

参数	类型	描述
bitmap	ImageBitmap	待显示的ImageBitmap对象。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>

//xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var canvas = this.$refs.canvas.getContext('2d');
    var offscreen = new OffscreenCanvas(500,500);
    var offscreenCanvasCtx = offscreen.getContext("2d");
    offscreenCanvasCtx.fillRect(0, 0, 200, 200); 

    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
  }
}

HarmonyOS API：CanvasRenderingContext2D对象-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-canvas-canvasrenderingcontext2d-0000001428061816-V3?catalogVersion=V3#ZH-CN_TOPIC_0000001428061816__方法

分类

卡片开发

IDE

标签

HarmonyOS API

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：CanvasRenderingContext2D对象

CanvasRenderingContext2D对象

方法

fillRect

clearRect

strokeRect

fillText

strokeText

measureText

stroke

beginPath

moveTo

lineTo

closePath

createPattern

bezierCurveTo

quadraticCurveTo

arc

arcTo

ellipse6+

rect

fill

clip

rotate

scale

transform

setTransform

translate

createPath2D6+

drawImage

restore

save

createLinearGradient6+

createRadialGradient6+

createImageData

getImageData

putImageData

getPixelMap9+

setLineDash

getLineDash

transferFromImageBitmap7+

目录

订阅鸿蒙技术特刊，精选内容抢先看

ellipse⁶⁺

createPath2D⁶⁺

createLinearGradient⁶⁺

createRadialGradient⁶⁺

getPixelMap⁹⁺

transferFromImageBitmap⁷⁺