画布 (Canvas)

画布是 ElenixOS 中用于绘制图形和图像的特殊 API 组件。本文档将介绍画布组件的功能、使用方法和注意事项。

功能介绍

画布组件允许开发者在上面绘制各种图形和图像，如线条、矩形、圆形、文本等。画布组件通常用于创建自定义图形、图表、游戏等。

使用方法

创建画布

使用 new lv.canvas() 构造函数创建画布对象：

// 创建画布对象
const canvas = new lv.canvas(eos.view.active());

配置画布

使用以下方法配置画布：

// 设置画布大小
canvas.setSize(200, 200);

// 设置画布位置
canvas.setPos(10, 10);

// 获取画布缓冲区
const buf = canvas.getBuffer();

// 创建绘图上下文
const ctx = canvas.getContext("2d");

绘制图形

使用绘图上下文绘制各种图形：

// 绘制线条
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(190, 190);
ctx.stroke();

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "#00FF00";
ctx.fill();

// 绘制文本
ctx.font = "20px Arial";
ctx.fillStyle = "#000000";
ctx.textAlign = "center";
ctx.fillText("Hello", 100, 100);

// 刷新画布
canvas.refresh();

示例：创建简单画布

// 创建画布
const canvas = new lv.canvas(eos.view.active());
canvas.setSize(200, 200);
canvas.align(lv.ALIGN_CENTER, 0, 0);

// 获取绘图上下文
const ctx = canvas.getContext("2d");

// 绘制图形
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(190, 190);
ctx.stroke();

ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "#00FF00";
ctx.fill();

// 刷新画布
canvas.refresh();

示例：创建动态画布

// 创建画布
const canvas = new lv.canvas(eos.view.active());
canvas.setSize(200, 200);
canvas.align(lv.ALIGN_CENTER, 0, 0);

// 获取绘图上下文
const ctx = canvas.getContext("2d");

// 动态绘制
let angle = 0;
setInterval(() => {
    // 清除画布
    ctx.clearRect(0, 0, 200, 200);
    
    // 绘制旋转的矩形
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(angle);
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(-50, -50, 100, 100);
    ctx.restore();
    
    // 刷新画布
    canvas.refresh();
    
    // 更新角度
    angle += 0.1;
}, 50);