回复
HarmonyOS API：画布组件
joytrian
发布于 2023-3-30 19:27
浏览
0收藏
版本：v3.1 Beta
canvas组件
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件。用于自定义绘制图形。
权限列表
无
子组件
不支持。
属性
支持通用属性。
样式
支持通用样式。
事件
支持通用事件。
方法
除支持通用方法外，还支持如下方法：
getContext
getContext(type: '2d', options?: ContextAttrOptions): CanvasRenderingContext2D
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
参数：
参数名 | 参数类型 | 必填 | 描述 |
type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 |
options6+ | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
表1 ContextAttrOptions
参数名 | 类型 | 说明 |
antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
返回值：
类型 | 说明 |
用于在画布组件上绘制矩形、文本、图片等。 |
toDataURL6+
toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
参数：
参数名 | 参数类型 | 必填 | 描述 |
type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
返回值：
类型 | 说明 |
string | 图像的URL地址。 |
示例
<!-- xxx.hml -->
<div>
<canvas ref="canvas1" style="width: 200px; height: 150px; 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.canvas1;
var dataURL = el.toDataURL();
console.log(dataURL);
// "data:image/png;base64,xxxxxxxx..."
}
}
Image对象
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片对象。
属性
属性 | 类型 | 默认值 | 必填 | 描述 |
src | string | - | 是 | 图片资源的路径。 |
width | <length> | 0px | 否 | 图片的宽度。 |
height | <length> | 0px | 否 | 图片的高度。 |
onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 |
onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 |
示例
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div>
// xxx.js
export default {
onShow() {
const el = this.$refs.canvas;
var ctx = el.getContext('2d');
var img = new Image();
// 图片路径建议放在common目录下
img.src = 'common/images/example.jpg';
img.onload = function () {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 360, 250);
};
img.onerror = function () {
console.log('Image load fail');
};
}
}
CanvasGradient对象
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
渐变对象。
addColorStop
addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。
参数：
参数 | 类型 | 描述 |
offset | number | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
color | string | 设置渐变的颜色。 |
示例：
<!-- 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');
const gradient = ctx.createLinearGradient(50,0,300,100);
gradient.addColorStop(0.0, 'red')
gradient.addColorStop(0.5, 'white')
gradient.addColorStop(1.0, 'green')
ctx.fillStyle = gradient
ctx.fillRect(0, 0, 300, 300)
}
}
ImageData对象
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。
属性
属性 | 类型 | 描述 |
width | number | 矩形区域实际像素宽度。 |
height | number | 矩形区域实际像素高度。 |
data | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
示例
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
ctx.fillRect(0,0,200,200)
var imageData = ctx.createImageData(1,1)
promptAction.showToast({
message:imageData,
duration:5000
})
}
}已于2023-3-30 19:27:51修改
赞
收藏
回复
相关推荐
