鸿蒙5.0版开发：UI框架JS组件-画布组件（CanvasRenderingContext2D对象）

本文链接：https://blog.youkuaiyun.com/m0_69424697/article/details/144490717

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

CanvasRenderingContext2D对象

说明：

从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>

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

示意图（关闭抗锯齿）
示意图（开启抗锯齿）

属性

名称	类型	描述
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”5+ - 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