# qcanvas

**Repository Path**: lizhicheng99/qcanvas

## Basic Information

- **Project Name**: qcanvas
- **Description**: Qcanvas是一个功能强大而使用简单的JS Canvas库，在线文档(以Wiki为准)：http://lizhicheng99.gitee.io/qcanvas-api-1.0 https://zhicheng99.github.io/Qcanvas-API/ 能通过使用它实现在Canvas上画线、画矩形、画图片、实现动画、实现拖动、包括给元素注册各类事件等一系列功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: gitee
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 3
- **Created**: 2021-05-19
- **Last Updated**: 2024-12-02

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: Canvas, 画布, html5画布, html5-canvas

## README

# Qcanvas

文档同步更新
http://lizhicheng99.gitee.io/qcanvas-api-1.0 
https://zhicheng99.github.io/Qcanvas-API/ 



框架引入方法
> ##### 方法一
> npm安装
>> 执行：npm install qcanvas
>> 页面引用： import {Qcanvas} from 'qcanvas';




> ##### 方法二
> 使用script标签直接引用

> 示例展示
https://zhicheng99.github.io/qcanvas/
部分示例载图

线
![](img/2.0/gif/line.gif)


文本
![](img/2.0/gif/text.gif)

矩形
![](img/2.0/gif/rect.gif)

圆
![](img/2.0/gif/arc.gif)

多边形
![](img/2.0/gif/polygon.gif)

图片
![](img/2.0/gif/img.gif)

精灵图
![](img/2.0/gif/spirit.gif)

动画
![](img/2.0/gif/animate.gif)

修改元素层级
![](img/2.0/gif/z-index.gif)

layer中的元素层级
![](img/2.0/gif/layer.gif)

拖动限制范围 (现只支持Qarc、Qpolygon、Qrect实例)
![](img/2.0/gif/range.gif)

右键菜单
![](img/2.0/gif/contextMenu.gif)

二次曲线
![](img/2.0/gif/quadraticCurve.gif)

二次曲线控制点计算
![](img/2.0/gif/quadraticCurve_handler.gif)


三次曲线
![](img/2.0/gif/bezierCurve.gif)

三次曲线控制点计算
![](img/2.0/gif/bezierCurve_handler.gif)

折线连接元素（横向）
![](img/2.0/gif/broken_horizontal.gif)

折线连接元素（竖向）
![](img/2.0/gif/broken_vertical.gif)

折线连接元素（横向）拖动
![](img/2.0/gif/broken_horizontal_drag.gif)

折线连接元素（竖向）拖动
![](img/2.0/gif/broken_vertical_drag.gif)

rect缩放 旋转
![](img/2.0/gif/resize.gif)

rect缩放 旋转 算法
![](img/2.0/gif/rotate.gif)