fabric官网：
https://fabric5.fabricjs.com/demos/
创建画布并绘制
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fabric.js Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head><body><canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas><script>const canvas = new fabric.Canvas('canvas');// 添加矩形const rect = new fabric.Rect({left: 100,top: 100,width: 200,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2,});canvas.add(rect);// 添加文本const text = new fabric.Text('Hello Fabric.js', {left: 50,top: 50,fontSize: 30,fill: 'green'});canvas.add(text);// 监听对象选中事件canvas.on('object:selected', function(e) {console.log('对象被选中:', e.target);});</script>
</body></html>
canvas相关内容
canvas.on 是用于监听画布（Canvas）或画布上对象（Object）事件的方法。通过 canvas.on，你可以监听用户交互（如点击、拖拽、缩放等）或对象状态变化（如选中、移动、旋转等）的事件。
canvas.on('事件名称', 回调函数);
事件名称：要监听的事件名称，例如 ‘mouse:down’、‘object:selected’ 等。
回调函数：事件触发时执行的回调函数，通常接收一个事件对象 e 作为参数。
- 画布事件: mouse:down：鼠标在画布上按下时触发。mouse:move：鼠标在画布上移动时触发。mouse:up：鼠标在画布上释放时触发。object:added：对象被添加到画布时触发。object:removed：对象从画布中移除时触发。- 对象事件:object:selected：对象被选中时触发。object:moving：对象正在移动时触发。object:scaling：对象正在缩放时触发。object:rotating：对象正在旋转时触发。object:modified：对象被修改（移动、缩放、旋转等）后触发。- 选择事件:selection:created：创建选择（选中一个或多个对象）时触发。selection:updated：选择更新时触发。selection:cleared：选择被清除时触发。 - 在回调函数中，事件对象 e 通常包含以下常用属性： e.target：触发事件的对象（例如被选中的对象）。 e.pointer：鼠标的坐标（{ x, y }）。 e.button：鼠标按钮（左键、右键等）。 e.e：原生事件对象（如 MouseEvent）。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fabric.js Demo</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
</head><body><canvas id="canvas" width="500" height="500" style="border: 1px solid #000;"></canvas><script>const canvas = new fabric.Canvas('canvas');// 添加矩形const rect = new fabric.Rect({left: 100,top: 100,width: 200,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2,});canvas.add(rect);// 监听画布点击事件canvas.on('mouse:down', function (e) {console.log('画布被点击，坐标:', e.pointer);});// 监听对象选中事件canvas.on('object:selected', function (e) {console.log('对象被选中:', e.target);});// 监听对象移动事件canvas.on('object:moving', function (e) {console.log('对象正在移动:', e.target);});// 监听选择事件canvas.on('selection:created', function (e) {console.log('选择被创建:', e.target);});canvas.on('selection:updated', function (e) {console.log('选择被更新:', e.target);});canvas.on('selection:cleared', function (e) {console.log('选择被清除');});</script>
</body></html>
![[Hello-CTF]RCE-Labs超详细WP-Level13Level14(PHP下的0/1构造RCE命令简单的字数限制RCE)](https://i-blog.csdnimg.cn/direct/0f33711ad3b54290870d10949d333132.png)
