学习 canvas

港控/mmm° 2021-09-03 03:37 503阅读 0赞

> 万事起头难啊！！！当自己真正放下心去学习的时候，才知道原来一切都是肝就完事了

## 一：微信小程序的canvas ##

### 1.1 使用微信小程序自带的 组件 ###

小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。

##### 1.1.1. npm 安装 #####

npm install --save wxml-to-canvas

#### 1.1.2 json 组件声明 ####

{ 
     "usingComponents": { 
     "wxml-to-canvas": "wxml-to-canvas",
     }
    }

![a21d774a5d989507596c4ee57dad7c7e.png][]

#### 1.1.3 index.wxml 引入组件 ####

![615b1c383cbd94f283c8ca950276357b.png][]

#### 1.1.4 index.js获取实例 ####

![c4a84b9629d3fc025b5a099e41e61ff5.png][]

![9923e24a578b2d3d74ced26a34c3b659.png][]

#### 1.1.5 编写 demo,js 既 要 渲染成 canvas 的 wxml 和 styles ####

![9d43c1a0f71c43474f7bedc77003a60f.png][]

### 1.2 使用 wxml2canvas 库 ###

下载安装库

![c35d731ed55ac5c9015f3ae724d974a1.png][]

#### 1.2.1 使用wxml 格式 ####

![1a5626eace44fbfcf5410468560fd9c7.png][]

![e56556e3f4048b39eaa8942b01d93e9a.png][]

#### 1.2.2 使用json 格式绘画 ####

![a31d745114d1df5039b81a994faf696e.png][]

## 二： 网页的canvas ##

### 2.1 使用原生的canvas ###

#### 2.1.1 使用canvas 标签 ####

![753db803d447e07b1c25813d2685b49c.png][]

#### 2.2.2 初始化 canvas ####

![93bd737e57be65cbd1561172fcea1706.png][]

#### 2.2.3 画线 ####

#### 2.2.4 画圆 ####

#### 2.2.5 画矩形 ####

#### 2.2.6 画图 ####

[a21d774a5d989507596c4ee57dad7c7e.png]: /images/20210813/edc4ba10880141dba01f429950e041fb.png
[615b1c383cbd94f283c8ca950276357b.png]: /images/20210813/25400820334f4f20b3de776bd73f8533.png
[c4a84b9629d3fc025b5a099e41e61ff5.png]: /images/20210813/5b9d8ddd50704552855cd961a58a33e0.png
[9923e24a578b2d3d74ced26a34c3b659.png]: /images/20210813/70448892a5ae421692f4a1e85cdb261f.png
[9d43c1a0f71c43474f7bedc77003a60f.png]: /images/20210813/db1cb1bea84546ef88e769ba2deedbc3.png
[c35d731ed55ac5c9015f3ae724d974a1.png]: /images/20210813/331516e922f145d88ca22f684e8f6394.png
[1a5626eace44fbfcf5410468560fd9c7.png]: /images/20210813/7bee10ee72e24144bec7d0a3788720e1.png
[e56556e3f4048b39eaa8942b01d93e9a.png]: /images/20210813/21e22a98257441c5b9831813d0a09f9f.png
[a31d745114d1df5039b81a994faf696e.png]: /images/20210813/dec748a1bcbb4ae5a921d944cd5e7030.png
[753db803d447e07b1c25813d2685b49c.png]: /images/20210813/e655f4c3c2e140aa8e317909aa420277.png
[93bd737e57be65cbd1561172fcea1706.png]: /images/20210813/e0404a7696d14254b135ab2a13aa3855.png