fabric.js是一个canvas的框架,可以快速的渲染文字,图片,线条,长方形,正方式,滤镜,动画等功能,下面就让我们来看看fabric.js怎么绘制一个可编辑的文字:
首先在html中创建一个canvas标签
<script src="https://cdn.bootcss.com/fabric.js/2.0.0-beta.7/fabric.min.js"></script>
<canvas id='myCanvas' width='300' height='200'></canvas>
<script>
var canvas=new fabric.Canvas('myCanvas')
var text=new fabric.IText('I'm in Comic Sanc',{
left:0,
top:0,
fill:'#000',
fontFamily: 'Comic Sans'
})
canvas.add(text)
</script>
到这里渲染文字就完成了,fabric.js绘制一个可编辑,拉伸,缩放,旋转,移动的文字就好了。
下面介绍文字的常用属性:
width: 文字的宽度
height: 文字的高度
top: 文字的顶边距离
left: 文字的左边距离
fill: 文字填充颜色
fontFamily: 字体
fontSize: 字体大小
scaleX: X缩放比例,默认为1
scaleY: Y缩放比例,默认为1
strokeWidth: 边框宽度
stroke: 边框颜色
textAlign: 对齐方式
textBackgroundColor:'',文字背景颜色
lineHeight: 行高
fontWeight: 文字粗细
初次写文章希望大家喜欢,也希望大家指点错误,也可以加入qq群439667347,大家一起讨论,一起进步,后续更新中...