console
const card = new fabric.Canvas('canvas')
// ...这里可以写canvas对象的一些配置,后面将会介绍
// 如果<canvas>标签没设置宽高,可以通过js动态设置
card.setWidth(350)
card.setHeight(200)
const textbox = new fabric.Textbox('这是一段文字', {
left: 50,
top: 50,
width: 150,
fontSize: 20, // 字体大小
fontWeight: 800, // 字体粗细
// fill: 'red', // 字体颜色
// fontStyle: 'italic', // 斜体
// fontFamily: 'Delicious', // 设置字体
// stroke: 'green', // 描边颜色
// strokeWidth: 3, // 描边宽度
scaleX: 2.5,
scaleY: 2.5,
hasControls: true,
borderColor: 'orange',
editingBorderColor: 'blue' // 点击文字进入编辑状态时的边框颜色
});
// 添加文字后,如下图
card.add(textbox);
const textbox1 = new fabric.Textbox('这是一段文字', {
left: 50,
top: 150,
width: 150,
fontSize: 50, // 字体大小
fontWeight: 800, // 字体粗细
// fill: 'red', // 字体颜色
// fontStyle: 'italic', // 斜体
// fontFamily: 'Delicious', // 设置字体
// stroke: 'green', // 描边颜色
// strokeWidth: 3, // 描边宽度
hasControls: true,
borderColor: 'orange',
editingBorderColor: 'blue' // 点击文字进入编辑状态时的边框颜色
});
// 添加文字后,如下图
card.add(textbox1);
<canvas id="canvas" width="350" height="200"></canvas>
#canvas {
border: 1px solid #ccc;
}