Fabric.js 创建画布（基础）

画布

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>

本作品采用《CC 协议》，转载必须注明作者和本文链接