kdraw
v1.0.1
Published
个人封装的canvas模块
Downloads
6
Readme
kdraw
kdraw是一个让你更加方便的使用canvas的框架,里面封装了canvas中的各个绘图的功能
绘制
绘制需要用到Kdraw这个类
画布参数:
*
* el:canvas图形的容器,可以兼容css3中的选择器
* width:画布的宽度
* height:画布的高度
* position:图像的左上角坐标
*
主要方法:
*
* fillText:绘制文本
* strokeText:文本描边
* polygon:绘制多边形
* arc:绘制圆
* img:绘制图片
*
绘制文本
用法:
const draw1 = new Draw({ el: '.text' }); draw1. fillText({ fontSize: '16px', content: '默认样式', })
参数:
* * text.content:绘制文本的内容 * text.fontFamily:绘制文本的字体 * text.fontSize: 绘制文本的字体大小 * text.fillStyle:填充文本的颜色 * text.strokeStyle:文本描边的颜色 * text.textBaseline:文本基线对齐选项 * text.maxWidth:绘制文本的最大宽度 * text.x:文字左上角的X坐标 * text.y:文字左上角的Y坐标 *
绘制图形
用法:
可以绘制单个图形
//多边形 const draw2 = new Draw({ el: '.polygon' }); draw2. polygon({ newobj: false, fill: false, stroke: true, vertex: [ [200, 0], [200, 100], [300, 100], [300, 0] ] }) //圆 draw2 .arc({ newobj: false, fill: false, close: false, endAngle: Math.PI / 2 });
也可以连续绘制图形
const draw2 = new Draw({ el: '.polygon' }); draw2. polygon({ close: false, fill: false, stroke: true }). polygon({ newobj: false, fill: false, stroke: true, vertex: [ [200, 0], [200, 100], [300, 100], [300, 0] ] }). polygon({ close: true, newobj: true, fill: false, stroke: true, vertex: [ [0, 150], [0, 250], [100, 250], [100, 150] ] }); const draw3 = new Draw({ el: '.arc' }); draw3. polygon({ close: false, fill: false, stroke: true }). polygon({ close: false, newobj: false, fill: false, stroke: true, vertex: [ [200, 0], [200, 100], [300, 100], [300, 0] ] }). arc({ newobj: false, fill: false, close: false, endAngle: Math.PI / 2 });
参数:
* polygon.newobj:是否是新绘制的多边形
* polygon.fill:是否需要填充
* polygon.close:是否需要关闭
* polygon.stroke:是否需要描边
* polygon.fillStyle:多边形的填充样式
* polygon.strokeStyle:多边形的描边样式
* polygon.lineWidth:多边形的描边线条粗细
* polygon.vertex:多边形的顶点坐标,数据类型是二位数组,如三角形的话,可以这样定义[[20,50],[20,80],[50,30]]
* arc.x:圆心的X坐标
* arc.y:圆心的Y坐标
* arc.radius:圆的半径
* arc.startAngle:圆的起始弧度
* arc.endAngle:圆的终点弧度
* arc.anticlockwise:是否顺时针画圆
* arc.newobj:是否是新绘制的圆
* arc.fill:是否需要填充
* arc.close:是否需要关闭
* arc.stroke:是否需要描边
* arc.fillStyle:圆的填充样式
* arc.strokeStyle:圆的描边样式
* arc.lineWidth:圆的描边线条粗细
- 绘制图片
用法:
const draw4 = new Draw({ el: '.img' }); draw4.img({ sx: 0, sy: 0, sWidth: 400, sHeight: 400 });
参数:
* img.src:图片的路径
* img.dx:目标画布的左上角在目标canvas上 X 轴的位置
* img.dy:目标画布的左上角在目标canvas上 Y 轴的位置
* img.dWidth:在目标画布上绘制图像的宽度
* img.dHeight:在目标画布上绘制图像的高度
* img.sx:需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标
* img.sy:需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标
* img.sWidth:需要绘制到目标上下文中的,源图像的矩形选择框的宽度
* img.sHeight:需要绘制到目标上下文中的,源图像的矩形选择框的高度
画布粒子化
粒子化需要用到新的类Particle
主要参数:
- draw:Draw实例对象里面的参数对象
- emitter:粒子发射器
- type:发射器类型
- width:宽度
- height:高度
- x:中心x坐标
- y:中心y坐标
- type:粒子的类型,目前支持square,circle两种类型
- speed:粒子的运动速度
- summary:粒子的总数量
- model:粒子运动形式,1为聚合,0为分散
- duration:总的运动时间,误差为100
- delay:粒子运动的延时范围,误差为100
- easing:缓动类型
- 缓动类型: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce
- 缓动模式.In, Out and InOut
- 使用方式:TWEEN.Easing.Quadratic.In
主要方法:
- animate:粒子的运动
用法:
const Particle = require('../src/js/particle.js');
const draw7 = new Draw({
el: '.ani-particle3'
});
draw7.img({
src: require('file-loader!../src/images/logo.png'),
sx: 0,
sy: 0,
sWidth: 400,
sHeight: 400
}, function(draw) {
new Particle(draw).animate({
space: 2,
model: 0,
emitter: {
x: 200,
y: 100,
width: 0,
height: 0,
}
});
});