• 定义画布的大小

  #define CANVAS_WIDTH    200
  #define CANVAS_HEITH    150

• 定义样式

    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.body.main_color = LV_COLOR_RED;
    style.body.grad_color = LV_COLOR_MAROON;
    style.body.radius = 4;
    style.body.border.width = 2;
    style.body.border.color = LV_COLOR_WHITE;
    style.body.shadow.color = LV_COLOR_WHITE;
    style.body.shadow.width = 4;
    style.line.width = 2;
    style.line.color = LV_COLOR_BLACK;
    style.text.color = LV_COLOR_BLUE;

• 定义画布缓冲buffer

 lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEITH)];

颜色大小缓冲计算转换宏定义

#if LV_COLOR_DEPTH == 1
#define LV_COLOR_SIZE 8
#elif LV_COLOR_DEPTH == 8
#define LV_COLOR_SIZE 8
#elif LV_COLOR_DEPTH == 16
#define LV_COLOR_SIZE 16
#elif LV_COLOR_DEPTH == 32
#define LV_COLOR_SIZE 32
#else
#error "Invalid LV_COLOR_DEPTH in lv_conf.h! Set it to 1, 8, 16 or 32!"
#endif

#define LV_IMG_BUF_SIZE_TRUE_COLOR(w, h) ((LV_COLOR_SIZE / 8) * w * h)

#define LV_CANVAS_BUF_SIZE_TRUE_COLOR(w, h) LV_IMG_BUF_SIZE_TRUE_COLOR(w, h)

创建画布对象

lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);

• 设置画布缓冲buffer

lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEITH, LV_IMG_CF_TRUE_COLOR)

• 画布位置对齐在显示屏的中心

   lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);

• 填充画布的背景色

lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

• 绘制矩形

lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &style);

• 绘制文本

lv_canvas_draw_text(canvas, 40, 20, 100, &style, "some text on text canvas", LV_LABEL_ALIGN_LEFT);

• 定义另一个buffer，并复制画布缓冲的内容到buffer

    lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEITH];
    memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));

• 定义位图描述变量

 lv_img_dsc_t img;
 img.data = (void*)cbuf_tmp;
 img.header.cf = LV_IMG_CF_TRUE_COLOR;
 img.header.w = CANVAS_WIDTH;
 img.header.h = CANVAS_HEITH;

• 再次填充背景色，擦除以上绘制的效果

lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

• 利用图象描述变量绘制

lv_canvas_rotate(canvas, &img, 30, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEITH / 2);

• 完整的画布绘制实现

#define CANVAS_WIDTH    200
#define CANVAS_HEITH    150
void canvas_demo(void) 
{
    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);
    style.body.main_color = LV_COLOR_RED;
    style.body.grad_color = LV_COLOR_MAROON;
    style.body.radius = 4;
    style.body.border.width = 2;
    style.body.border.color = LV_COLOR_WHITE;
    style.body.shadow.color = LV_COLOR_WHITE;
    style.body.shadow.width = 4;
    style.line.width = 2;
    style.line.color = LV_COLOR_BLACK;
    style.text.color = LV_COLOR_BLUE;

     lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEITH)];
    lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEITH, LV_IMG_CF_TRUE_COLOR);
    lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

    lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &style);
    
    lv_canvas_draw_text(canvas, 40, 20, 100, &style, "some text on text canvas", LV_LABEL_ALIGN_LEFT);

    lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEITH];
    memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));
    lv_img_dsc_t img;
    img.data = (void*)cbuf_tmp;
    img.header.cf = LV_IMG_CF_TRUE_COLOR;
    img.header.w = CANVAS_WIDTH;
    img.header.h = CANVAS_HEITH;

    lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);
   lv_canvas_rotate(canvas, &img, 30, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEITH / 2);
}

• 调用canvas_demo函数，编译并运行