画布

Fabric.js 的画布操作性是非常强的，这里我列举几个常用例子，其他操作可以查看官方文档。

『Fabric.js 画布操作 - 文档』

🎁 本节案例在线预览 - 画布

🎁 本节代码仓库

基础版（可交互）

基础版就是“起步”章节所说的那个例子。

复制
<template> 
 <canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
​
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric' // 引入 fabric
​
function init() {
  const canvas = new fabric.Canvas('canvas') // 这里传入的是canvas元素的id
​
  // 创建一个长方形 
  const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px 
    left: 100, // 距离容器左侧 100px 
    width: 30, // 矩形宽度 30px 
    height: 30, // 矩形高度 30px 
    fill: 'red' // 填充 红色
  })
​
  canvas.add(rect) // 将矩形添加到 canvas 画布里
}
​
onMounted(() => {
  init()
})
</script>