canvas-path-design v1.0.0

安装

npm install canvas-path-design

使用

以下所有的 cxt 均代表上下文绘图环境对象 <=> let cxt = canvas.getContext('2d');

基本上所有图形都只是规划路径,而没有调用 stroke 进行描边绘制,使用者可以根据自身需求进行先描边或是先填充

一、路径绘制

直线

cxt.rabbitLine(startX, startY, endX, endY);
/*
    startX:直线开始的横坐标;
    startY:直线开始的纵坐标;
    endX:直线结束的横坐标;
    endY:直线结束的纵坐标;
  */

贝塞尔二次曲线绘制直线

cxt.rabbitBezierLine(startX, startY, endX, endY);
/*
    startX:直线的开始横坐标x
    startY:直线的开始纵坐标y
    endX:直线的结束横坐标x
    endY:直线的结束纵坐标y
  */

三角形路径

cxt.rabbitTriangle(x1, y1, x2, y2, x3, y3);
/*
    x1,y1:三角形第一个点的横纵坐标
    x2,y2:三角形第二个点的横纵坐标
    x3,y3:三角形第三个点的横纵坐标
  */

矩形路径

cxt.rabbitRect(startX, startY, width, height);
/*
    startX:矩形的左上角横坐标;
    startY:矩形的左上角纵坐标;
    width:矩形的宽度;
    height:矩形的高度;
  */

圆形路径

cxt.rabbitCircle(x, y, radius, (anticlockwise = false));
/*
    x:圆形路径的横坐标;
    y:圆形路径的纵坐标;
    radius:圆的半径大小;
    anticlockwise:是否逆时针; => default is false
  */

五角星路径

cxt.rabbitStar(r, R, offsetX, offsetY, rot);
/*
    r:内圆半径
    R:外圆半径
    offsetX:五角星的横坐标
    offsetY:五角星的纵坐标
    rot:旋转角度
  */

填充五角星

cxt.rabbitFillStar(r, R, offsetX, offsetY, rot, fillStyle);
/*
    r:内圆半径
    R:外圆半径
    offsetX:五角星的横坐标
    offsetY:五角星的纵坐标
    rot:旋转角度
    fillStyle:填充样式
  */

太极图

cxt.rabbitGossip(x, y, radius, rot);
/*
      x:太极图的横坐标;
      y:太极图的纵坐标;
      radius:太极图的半径;
      rot:旋转角度  => 方便做动画使用
  */

绘制任意多边形路径

cxt.rabbitPolygon(coordinates);
/*
    coordinates:[x1,y1,x2,y2,x3,y3,...]
    数组项目需要构成偶数对，每两个项构成一个点坐标
  */

绘制心形路径

cxt.rabbitHeart(x, y, radius, (scaleX = 6), (scaleY = 6));
/*
    x,y:心形凹陷处横纵坐标;
    scaleX:x方向伸缩;
    scaleY:y方向伸缩;
  */

绘制圆角矩形路径

cxt.rabbitRoundRect(x, y, width, height, (radius = 20));
/*
    x,y:矩形左上角的位置;
    width,height:矩形宽和高;
    radius:矩形圆角大小 =>default = 20
  */

二、动画效果

旋转的太极图

// 直接调用该函数传参即可。
ActiveGossip(
  pen /*传入画笔=>上下文绘图环境对象 */,
  clearX /*要清除的画布的左上角横坐标*/,
  clearY /*要清除的画布的左上角横纵坐标*/,
  WIDTH /*要清除的画布的宽度*/,
  HEIGHT /*要清除的画布的高度*/,
  centerX /*八卦图圆心横坐标*/,
  centerY /*八卦图圆心纵坐标*/,
  RADIUS /*八卦图圆半径*/,
  ROTATE /*初始旋转角度*/,
  SPEED /*旋转速度*/,
  COLOR /*画布填充的颜色*/
);

开源协议

ISC