更新记录

1.1.0（2025-05-29） 下载此版本

1. 重构代码将 ts 改为uts

2. 修复 Android 平台运行报错问题

1.0.0（2025-04-03） 下载此版本

首次上传

平台兼容性

uni-app

uni-app x

其他

u-canvas

介绍

一款快速的, 灵活的, 开源的, 支持 UniappX 的 Canvas 基础图形绘制引擎.

随时跟进 Uniappx 的 Canvas 更新, 不参杂任何三方工具/库, 达到最小代码尺寸.

简单便捷的 API, 使用户快速上手, 多平台的支持包括 APP, WEB, MP.

功能介绍

1. 支持自定义图形

2. 支持图形嵌套

3. 支持图形矩阵

4. 内置常用图形

5. 统一绘制接口

快速开始

<script lang="uts" setup>
    import * as ucan from "@/uni_modules/u-canvas";
    import {
        UCanvas,
        Composition,
        Text,
        Rectangle,
        Polyline,
        Ring,
        Pie,
        Circle,
        Polygon,
        Picture,
        ImagePixel,
        Point,
    } from "@/uni_modules/u-canvas";

    const uCanvas = new UCanvas({ canvasId: "ucanvas" });

    async function init() : Promise<void> {
        await uCanvas.ensureInitialize();
        uCanvas.addGraphic(
            new Composition({
                x: 10,
                y: 10,
                children: [
                    new Rectangle({ x: 0, y: 0, w: 100, h: 100, radii: 10 }),
                    new Text({ x: 0, y: 120, text: "Rectangle" }),
                ],
            })
        );

        uCanvas.addGraphic(
            new Composition({
                x: 140,
                y: 10,
                children: [
                    new Polyline({ points: [new Point(0, 0), new Point(100, 0), new Point(0, 100), new Point(100, 100)], }),
                    new Text({ x: 0, y: 120, text: "Polyline" }),
                ],
            })
        );
        uCanvas.addGraphic(
            new Composition({
                x: 270,
                y: 10,
                children: [
                    new Polygon({ points: [new Point(0, 0), new Point(100, 0), new Point(0, 100)], }),
                    new Text({ x: 0, y: 120, text: "Polygon" }),
                ],
            })
        );
        uCanvas.addGraphic(
            new Composition({
                x: 10,
                y: 160,
                children: [
                    new Pie({
                        cx: 50,
                        cy: 50,
                        radius: 50,
                        startAngle: 0,
                        endAngle: Math.PI + Math.PI / 3,
                    }),
                    new Text({ x: 0, y: 120, text: "Pie" }),
                ],
            })
        );
        uCanvas.addGraphic(
            new Composition({
                x: 140,
                y: 160,
                children: [
                    new Circle({ cx: 50, cy: 50, radius: 50, }),
                    new Text({ x: 0, y: 120, text: "Circle" }),
                ],
            })
        );
        uCanvas.addGraphic(
            new Composition({
                x: 270,
                y: 160,
                children: [
                    new Ring({
                        cx: 50,
                        cy: 50,
                        innerRadius: 30,
                        outerRadius: 50,
                        startAngle: 0,
                        endAngle: Math.PI + Math.PI / 1.5,
                    }),
                    new Text({ x: 0, y: 120, text: "Ring" }),
                ],
            })
        );
        const data = new Uint8ClampedArray([
            parseInt("10000000", 2),
            parseInt("01000000", 2),
            parseInt("00100000", 2),
            parseInt("00010000", 2),
            parseInt("00001000", 2),
            parseInt("00000100", 2),
            parseInt("00000010", 2),
            parseInt("00000001", 2),
        ]);
        uCanvas.addGraphic(
            new Composition({
                x: 10,
                y: 300,
                children: [
                    new ImagePixel({
                        imageData: uCanvas.makeImageData({ data, bytesPerScanline: 8, array: [12, 12] }),
                        x: 0,
                        y: 0,
                    }),
                    new Text({ x: 0, y: 120, text: "ImagePixel" }),
                ],
            })
        );

        const image = await uCanvas.createImage("/static/logo.png");
        // const image = await uCanvas.createImage("https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png");
        uCanvas.addGraphic(
            new Composition({
                x: 140,
                y: 300,
                children: [
                    new Picture({ image: image, x: 0, y: 0, w: 100, h: 100, }),
                    new Text({ x: 0, y: 120, text: "Image" }),
                ],
            })
        );
        uCanvas.addGraphic(
            new Composition({
                x: 10,
                y: 500,
                children: [
                    new Text({ x: 0, y: 0, text: "ABCDEFGHIJKLMNOPQRSTUVWXYZ" }),
                    new Text({ x: 0, y: 24, text: "abcdefghijklmnopqrstuvwxyz" }),
                ],
            })
        );
        uCanvas.render();
    }

    onReady(() => {
        init();
    });
</script>

<template>
    <view class="canvas-component">
        <canvas canvas-id="ucanvas" id="ucanvas" class="canvas" />
    </view>
</template>

<style>
    /* #ifdef WEB || MP */
    /* 禁止页面的回弹效果, APP 在 pages.json里面设置 */
    body {
        overflow: hidden;
    }

    /* #endif */

    .canvas-component {
        width: 100%;
        height: 100%;
    }

    .canvas {
        width: 100%;
        height: 100%;

        border: 1px solid red;
    }
</style>

相关链接

• u-canvas 文档