p5.js和html5 canvas两者有何区别？

简单的说，p5.js是一个js类库；canvas是一个html5新增的一个元素，"canvas" 即 "画布",  此元素是为了客户端矢量图形而设计的。它自己没有行为，却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。两者要想绘图，都需执行js代码。仔细看p5的初始代码，

function setup() {

  createCanvas(400, 400)//为html页面创建canvas元素

}

两者的本质都是通过js来实现canvas的表现，p5.js与jquery库无异，将一些常用的功能需求的代码进行封装，以实现代码的简化。也就是任何p5.js可实现的，通过纯canvas的js api都能实现，不过要想实现，往往牺牲得是时间与效率。而p5.js提供了一种仅需少量代码就能实现很炫酷的 *** 作的方法。两者渲染速度比较，理论上应该是一样的，毕竟大家殊途同归嘛，都是通过js来实现的，只要纯js写的足够优化，是会比p5.js快一丢丢的，差异不明显。明显的差异是p5.js在网页加载时需要下载p5.js的类库才能进行 *** 作，而canvas api由于是客户端提供的原因，则不需要。

值得参考：

https://blog.csdn.net/weixin_43392489/article/details/108368993

利用htmlToCanvas生成缩略图

文档地址：

http://html2canvas.hertzen.com/

没找到中文文档

canvas

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

1、导语

我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。而fabric 旨在解决这个问题。

2、 安装

3、使用

3.1、绘制一个简单的图形

3.1.1

矩形

可以看到一个通过鼠标放大缩小且可以旋转的绿色矩形

3.1.2 

圆和矩形

我们可以通过设置以下属性，决定是否可以对相关元素进行交互

3.2、绘制图片

主要是通过URL和img标签绘制 

3.3 通过自定义的路径绘制

我们一起先看看几个参数的含义

可以看到通过路径绘制,我们可以制作非常复杂的图形(但是一般用不到,我们一般用它来解析 SVG 后拿到 path 复原图形)

3.4 动画

animate(param1,param2,param3)

param1:动画的属性

param2：动画的最终位置

param3：可选对象（主要有如下属性）

绝对动画

相对动画

3.5、 图像滤镜

目前 Fabric 为我们提供了以下内置滤镜

图像滤镜

3.6、颜色

无论你是使用十六进制，RGB 或 RGBA 颜色，Fabric 都能处理的很好

定义颜色

颜色转换

颜色叠加

3.7 渐变

Fabric 通过 setGradient 方法支持渐变，在所有对象上定义。调用 setGradient('fill', { ... })就像设置一个对象的“fill”值一样。

3.8、事件

fabric 中通过 on 方法来初始化事件，off 方法用来删除事件。

常用的事件有以下

“mouse:down” 鼠标被按下

“object:add” 对象被添加

“after:render” 渲染完成

还有一大堆:

鼠标事件:“mouse:down” ,“mouse:move”和“mouse:up...” 选择相关的事件：“before:selection:cleared”, “selection:created”, 详细的可以查看 官方文档

Fabric 允许将侦听器直接附加到 canvas 画布中的对象上。

3.9、自由绘画

Fabric canvas 的 isDrawingMode 属性设置为 true 即可实现自由绘制模式.

这样画布上的点击和移动就会被立刻解释为铅笔或刷子。

最后

很开心写下这篇文章,它是我近期接触到的项目中用到的一个很强大的canvas库，所以有了这个契机就系统性的了解熟悉一下它的相关使用，希望能对你有所帮助。

参考教程

官网链接：https://gitee.com/eternitywith/fabric.js-docs-cn

CDN：http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js

github: https://github.com/Rookie-Birds/Fabric-Tutorial_zh-CN

参考文章：

https://segmentfault.com/a/1190000038688093

https://juejin.cn/post/6844903773945462792

---