全局对象

内部对象canvalib,是一个类数组对象.也是模仿jQuery的,里面包含canvas元素引用和ctx(2D)绘画对象和库提供的工具方法.

    // 类数组对象,存放用id选取的canvas元素和2D绘画对象.
    // 返回this,可以链式调用 
    function canvalib(canvasId){
             ...
             return this;
    }

    // 属性
    this.canvas
    this.ctx

    // 工厂函数,实例化这个对象.
    function factory(selector){
        return new canvalib(canvasId);
    }

    // 引用对象 外部调用这个函数使用cavlib对象.
    window.cavlib = factory;
     

style实例方法

调用工厂函数实例化后,可以调用style给画布设置样式风格

    // 给canva元素设置style
    // 0:灰色背景,默认值 其它值:未实现
    window.cavlib('canvasDomId').style(num = 0);
 

扩展cavlib对象实例方法

    // 为cavlib对象添加实例方法 prototype上的方法.
    // json 一个方法名和函数值的json对像.方法名要用""号包起来.
    cavlib.extend(json)

Axis

将画布视为直角坐标系时,一些坐标系相关方法.皆为实例方法.

    this
    // 画坐标系
    this.xyAxis();
    ...

xyAxis

在画布上绘制直角坐标系辅助线.省略所有参数时,坐标轴以画布中心为原点,长度为画布长/高

指定原点坐标,但不指定X/Y轴长时,坐标轴长度为画布长/高

    this.xyAxis(style = 0, oX = 0, oY = 0, oXLen = 0, oYLen = 0, oXLen1 = 0, oYLen1 = 0)

• style : number 风格
  • 0 : 原点在中心,轴长等于画布长,虚线
  • 1 : 同0,实线
  • 2或大于2 : 自定义原点位置和轴长,偶数时虚线,奇数时实线
• oX : number 原点x坐标(以画布左上角为(0,0)的坐标)
• oY : number 原点y坐标
• oXLen : number x正轴长度
• oYLen : number y正轴长度
• oXLen1 : number x负轴长度
• oYLen1 : number y负轴长度

lineArrow

连接2个或者以上的点,结束时画上箭头.箭头底边与线段最后一段垂直

    this.lineArrow(points, side = 12, height = 10, fill = true)

• points : Array(number) 点坐标数组: x1,y1,x2,y2,....
• side : number 箭头底边长
• height : number 箭头高
• fill : boolean true(实心)false(空心)

p2Rect

根据对角线上2点画出矩形

    this.p2Rect(x1, y1, x2, y2, style = 0, color = 'black')

• x1 : number 点x坐标
• y1 : number 点x坐标
• x2 : number 对角点x坐标
• y2 : number 对角点y坐标
• style : number 风格: 0偶数时虚线,1实线
• color : string 线条颜色.(strokeStyle)

pointVH

画坐标系中的一点到x/y轴的垂直和水平连线

    this.pointVH(x, y, style = 0, color = 'black', oX = 0, oY = 0)

• x : number 点x坐标(在以oX,oY为原点的坐标系)
• y : number 点x坐标
• style : number 风格: 0(原点在中心,虚线),1(同0,实线) 其它:指定原点,偶数虚线奇数实线
• color : string 线条颜色.(strokeStyle)
• oX : number 原点x坐标
• oY : number 原点y坐标

pointTag

标记一个点,用于放大显示

    this.pointTag(x, y, color = 'black', style = 0, cir = 3)

• x : number 点x坐标
• y : number 点x坐标
• color : string 填充颜色fillStyle
• style : number 风格: 0(圆点),1(正方形)
• cir : number 圆半径/正方形半边长

pointChar

给一个点标记字母

    this.pointChar(x, y, char, deg = 0, color = 'black', cir = 20)

• x : number 点x坐标
• y : number 点x坐标
• char : string 字母
• deg : number 极角(0~359). 点为圆心,字母标记在圆周的一个点上.X轴正方向为0度,顺时针.
• color : string 填充颜色fillStyle
• cir : number 极径. 字母到点半径.

line

画经过两点的线段

    this.line(x1, y1, x2, y2, color = 'black', lineWidth = 1)

• x1 : number 点1的x坐标
• y1 : number 点1的y坐标
• x2 : number 点2的x坐标
• y2 : number 点2的y坐标
• color : string 线条颜色
• lineWidth : number 线条厚度

fillArea

填充路径区域

    this.fillArea(points, color = 'black', rule = 0)

• points : Array(Array(number)) 构成路径区域的坐标点数组,每个元素是含2个坐标值的数组[[x,y],[x1,y1],]
• color : string 填充颜色
• rule : number 0=nonzero(非零环绕规则,默认),1=evenodd(奇偶环绕规则)

line{}

cavlib的静态对象line,计算一些直线相关的数据.

    cavlib.line;
    // 两点间距离
    cavlib.line.dist();
    ...

需要注意的是,点的坐标值都是平面直角坐标系里的.这和canvas的坐标系不同,canvas向下和向右坐标值是正值,而平面直角坐标系向上和向右是正值,也就是说,Y坐标的值相反!所以,传入参数时,如果是canvas坐标值,那么Y值要传-Y.

getK

获取两个点所在直线的斜率.如果与 X 轴平行,返回 0 ,与 Y 轴平行返回 null.

注意Y坐标值,canvas坐标要传入Y坐标的相反值.

    line.getK(p1, p2, p2x, p2y)

• p1 : {x:number,y:number} 点1对象{x,y}或点1的x坐标
• p2 : {x:number,y:number} 点2对象{x,y}或点1的y坐标
• p2x : number 点2的x坐标
• p2y : number 点2的y坐标

dist

获取两点间距离

    line.dist(p1, p2, p2x, p2y)

• p1 : {x:number,y:number} 点1对象{x,y}或点1的x坐标
• p2 : {x:number,y:number} 点2对象{x,y}或点1的y坐标
• p2x : number 点2的x坐标
• p2y : number 点2的y坐标