https://github.com/wklili/canvas_interview

原生js实现canvas点控制bezier曲线
https://github.com/wklili/canvas_interview

bezier canvas javascript mark

Last synced: about 1 month ago
JSON representation

原生js实现canvas点控制bezier曲线

• Host: GitHub
• URL: https://github.com/wklili/canvas_interview
• Owner: WKlili
• Created: 2019-07-31T19:04:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T08:18:37.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T02:26:28.382Z (about 1 month ago)
• Topics: bezier, canvas, javascript, mark
• Language: TypeScript
• Homepage: https://wklili.github.io/canvas_Interview/
• Size: 2.98 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚀 原生 js 控制 bezier 曲线

demo 访问地址：https://wklili.github.io/canvas_Interview/

## 实现贝塞尔曲线的基本控制

#### 1.canvas 内部元素与鼠标事件绑定

#### 2.动态修改控制点与 bezier

## 动态添加控制点的 label 描述

#### 1.初始化自定义注释

#### 2.可以双击点进行添加注释

#### 3.点击注释可以进行修改

## 对控制点周围的样式进行修改

#### 1.背景颜色渐变

#### 2.采用滤镜做周围样式颜色变化(采用计算圆的方式去用滤镜在周围生成样式)

## 根据屏幕的分辨率不同绘制出高清的 canvas 图形

#### 1.尺寸改变后导致绑定的鼠标事件需要一起变动

#### 2.绘制图形的接口需要加上 ratio

#### 待完善：canvas 事件自动绑定类（现在是每添加一个元素则手动添加到观察数组中）

```

npm run start

```

to start your application

```

npm run build

```

to bundle your application