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)](http://pic.xiahunao.cn/[Hello-CTF]RCE-Labs超詳細WP-Level13Level14(PHP下的0/1構造RCE命令簡單的字數限制RCE))
