HarmonyOS API：CanvasRenderingContext2D对象

joytrian

发布于 2023-3-29 21:09

浏览

0收藏

版本：v3.1 Beta

CanvasRenderingContext2D对象

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。

示例：

<!-- xxx.hml -->
<div>
  <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
  <input type="button" style="width: 180px; height: 60px;" value="handleClick" onclick="handleClick" />
  <input type="button" style="width: 180px; height: 60px;" value="antialias" onclick="antialias" />
</div>1.
2.
3.
4.
5.
6.

// 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();
  },
  antialias() {
    const el = this.$refs.canvas1;
    const ctx = el.getContext('2d', { antialias: true });
    ctx.beginPath();   
    ctx.arc(100, 75, 50, 0, 6.28);
    ctx.stroke(); 
    }
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

示意图（关闭抗锯齿）

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

示意图（开启抗锯齿）

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

属性

名称	类型	描述
fillStyle	<color> \| CanvasGradient \| CanvasPattern	指定绘制的填充色。 - 类型为<color>时，表示设置填充区域的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。 - 类型为CanvasPattern时，使用 createPattern()方法创建。
lineWidth	number	设置绘制线条的宽度。
strokeStyle	<color> \| CanvasGradient \| CanvasPattern	设置描边的颜色。 - 类型为<color>时，表示设置描边使用的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。 - 类型为CanvasPattern时，使用 createPattern()方法创建。
lineCap	string	指定线端点的样式，可选值为： - butt：线端点以方形结束。 - round：线端点以圆形结束。 - square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。默认值：butt
lineJoin	string	指定线段间相交的交点样式，可选值为： - round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 - bevel：在线段相连处使用三角形为底填充，每个部分矩形拐角独立。 - miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。默认值：miter
miterLimit	number	设置斜接面限制值，该值指定了线条相交处内角和外角的距离。默认值：10
font	string	设置文本绘制中的字体样式。语法：ctx.font="font-style font-weight font-size font-family"⁵⁺ - font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。 - font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。 - font-size(可选)，指定字号和行高，单位只支持px。 - font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。默认值："normal normal 14px sans-serif"
textAlign	string	设置文本绘制中的文本对齐方式，可选值为： - left：文本左对齐。 - right：文本右对齐。 - center：文本居中对齐。 - start：文本对齐界线开始的地方。 - end：文本对齐界线结束的地方。 ltr布局模式下start和left一致，rtl布局模式下start和right一致。默认值：left
textBaseline	string	设置文本绘制中的水平对齐方式，可选值为： - alphabetic：文本基线是标准的字母基线。 - top：文本基线在文本块的顶部。 - hanging：文本基线是悬挂基线。 - middle：文本基线在文本块的中间。 - ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideographic基线位置在字符本身的底部。 - bottom：文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。默认值： alphabetic
globalAlpha	number	设置透明度，0.0为完全透明，1.0为完全不透明。
lineDashOffset	number	设置画布的虚线偏移量，精度为float。默认值：0.0
globalCompositeOperation	string	设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考表类型字段说明。默认值：ource-over
shadowBlur	number	设置绘制阴影时的模糊级别，值越大越模糊，精度为float。默认值：0.0
shadowColor	<color>	设置绘制阴影时的阴影颜色。
shadowOffsetX	number	设置绘制阴影时和原有对象的水平偏移值。
shadowOffsetY	number	设置绘制阴影时和原有对象的垂直偏移值。
imageSmoothingEnabled⁶⁺	boolean	用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。默认值：true

fillStyle

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.fillStyle = '#0000ff';
    ctx.fillRect(20, 20, 150, 100);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

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

lineWidth

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 5;
    ctx.strokeRect(25, 25, 85, 105);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

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

strokeStyle

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#0000ff';
    ctx.strokeRect(25, 25, 155, 105);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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

lineCap

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth = 8;
    ctx.beginPath();
    ctx.lineCap = 'round';
    ctx.moveTo(30, 50);
    ctx.lineTo(220, 50);
    ctx.stroke();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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

lineJoin

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.beginPath();
    ctx.lineWidth = 8;
    ctx.lineJoin = 'miter';
    ctx.moveTo(30, 30);
    ctx.lineTo(120, 60);
    ctx.lineTo(30, 110);
    ctx.stroke();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

miterLimit

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.lineWidth =14;
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 3;
    ctx.moveTo(30, 30);
    ctx.lineTo(120, 60);
    ctx.lineTo(30, 70);
    ctx.stroke();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

font

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.font = '30px sans-serif';
    ctx.fillText("Hello World", 20, 60);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

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

textAlign

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.strokeStyle = '#0000ff';
    ctx.moveTo(140, 10);
    ctx.lineTo(140, 160);
    ctx.stroke();
    ctx.font = '18px sans-serif'; 
    // Show the different 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);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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

textBaseline

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    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);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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

globalAlpha

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

// 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, 50, 50);
    ctx.globalAlpha = 0.4;
    ctx.fillStyle = 'rgb(0,0,255)'; 
    ctx.fillRect(50, 50, 50, 50);

  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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

lineDashOffset

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

// 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.lineDashOffset = 10.0;
    ctx.stroke();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

globalCompositeOperation

类型字段说明

值	描述
source-over	在现有绘制内容上显示新绘制内容，属于默认值。
source-atop	在现有绘制内容顶部显示新绘制内容。
source-in	在现有绘制内容中显示新绘制内容。
source-out	在现有绘制内容之外显示新绘制内容。
destination-over	在新绘制内容上方显示现有绘制内容。
destination-atop	在新绘制内容顶部显示现有绘制内容。
destination-in	在新绘制内容中显示现有绘制内容。
destination-out	在新绘制内容外显示现有绘制内容。
lighter	显示新绘制内容和现有绘制内容。
copy	显示新绘制内容而忽略现有绘制内容。
xor	使用异或操作对新绘制内容与现有绘制内容进行融合。

示例：

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

// xxx.js
export default {
onShow() {
  const el =this.$refs.canvas;
  const ctx = el.getContext('2d');
  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);
}
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

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

示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。

shadowBlur

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 30;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(20, 20, 100, 80);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

shadowColor

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 30;
    ctx.shadowColor = 'rgb(0,0,255)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(30, 30, 100, 100);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

shadowOffsetX

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 20;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(20, 20, 100, 80);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

shadowOffsetY

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    ctx.shadowBlur = 10;
    ctx.shadowOffsetY = 20;
    ctx.shadowColor = 'rgb(0,0,0)';
    ctx.fillStyle = 'rgb(255,0,0)';
    ctx.fillRect(30, 30, 100, 100);
 }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

imageSmoothingEnabled⁶⁺

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

// xxx.js
export default {
  onShow() {
    const el =this.$refs.canvas;
    const ctx = el.getContext('2d');
    var img = new Image();
    img.src = 'common/image/example.jpg';
    img.onload = function() {
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(img, 0, 0, 400, 200);
    };
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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

已于2023-3-30 20:19:36修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：CanvasRenderingContext2D对象

CanvasRenderingContext2D对象

属性

fillStyle

lineWidth

strokeStyle

lineCap

lineJoin

miterLimit

font

textAlign

textBaseline

globalAlpha

lineDashOffset

globalCompositeOperation

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

imageSmoothingEnabled⁶⁺

目录

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

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：CanvasRenderingContext2D对象

CanvasRenderingContext2D对象

属性

fillStyle

lineWidth

strokeStyle

lineCap

lineJoin

miterLimit

font

textAlign

textBaseline

globalAlpha

lineDashOffset

globalCompositeOperation

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

imageSmoothingEnabled6+

目录

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

imageSmoothingEnabled⁶⁺