canvas可以使用Fabric.js來做擴展，您可以在畫布上創(chuàng)建和填充對象； 諸如簡單幾何形狀之類的對象 - 矩形、圓形、橢圓形、多邊形或由數(shù)百或數(shù)千條簡單路徑組成的更復(fù)雜的形狀。 然后，您可以使用鼠標縮放、移動和旋轉(zhuǎn)這些對象； 修改它們的屬性 - 顏色、透明度、z-index 等。您還可以完全操作這些對象 - 通過簡單的鼠標選擇將它們分組。

效果圖

源代碼（共72行）

/*
* @Author: 大劍師蘭特（xiaozhuanlan），還是大劍師蘭特（CSDN）
* @此源代碼版權(quán)歸大劍師蘭特所有，可供學(xué)習(xí)或商業(yè)項目中借鑒，未經(jīng)授權(quán)，不得重復(fù)地發(fā)表到博客、論壇，問答，git等公共空間或網(wǎng)站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-24
*/
<template><div class="container"><div class="top"><h3>利用fabric繪制圖形，可以平移，旋轉(zhuǎn)，放縮</h3><div>大劍師蘭特, 還是大劍師蘭特，gis-dajianshi</div></div><div class="dajianshi "><canvas id="canvas" width="600" height="300"></canvas></div></div>
</template>
<script>import {fabric} from "fabric";export default {data() {return {}},mounted() {this.getdata()},methods: {getdata() {var canvas = new fabric.Canvas('canvas');var rect = new fabric.Rect({top: 100,left: 100,width: 60,height: 70,fill: 'red'});canvas.add(rect);},}}
</script><style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: lightcoral;color: #fff;}.dajianshi {margin: 100px auto 0;width: 600px;height: 300px;background: #059;}
</style>

安裝插件

npm install fabric --save

相關(guān)API

https://www.npmjs.com/package/fabric