SOURCE

console 命令行工具 X clear

                    
>
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;
}

本项目引用的自定义外部资源