HTML5 Canvas Common Library

Jusfoun Visualization Department.

九次方大数据可视化部。

Pattern/Style Definition 样式定义

Solid Color 纯色

const style1 = '#FFF';
const style2 = 'rgba(0, 0, 0, 0.5)';

Linear Gradient 线性渐变

const style = {
  type: 'linearGradient'
  // Indicate this pattern apply each line individually or global.
  // 指示此样式单独应用于每一行还是整体
  scope: 'global' or 'line'
  x0: 0,
  y0: 0,
  x1: 1,
  y1: 0,
  colorStops: [
    {
      offset: 0,
      color: '#FFF'
    },
    {
      offset: 1,
      color: '#000'
    }
  ]
};

Radial Gradient 放射状/径向渐变

const style = {
  type: 'radialGradient'
  // Indicate this pattern apply each line individually or global.
  // 指示此样式单独应用于每一行还是整体
  scope: 'global' or 'line'
  x0: 0,
  y0: 0,
  r0: 0,
  x1: 1,
  y1: 1,
  r1: 1,
  colorStops: [
    {
      offset: 0,
      color: '#FFF'
    },
    {
      offset: 1,
      color: '#000'
    }
  ]
};

Image Fill 图形填充

const style = {
  type: 'pattern',
  image,
  repetition,
};

Text 文字

renderTextLikeDocument(text, maxWidth, style)

Render text to image with restricted width and styles.

以指定的宽度和样式渲染文本为图形。

import {renderTextLikeDocument} from '@jusfoun-vis/canvas-common';

const style = {
  fontSize : 12,
  fontWeight : 'bold',
  fontFamily : 'Microsoft YaHei',
  // left (default), center, right
  textAlign : 'left',
  lineHeight : 12,
  // unified number or [top, right, bottom, left] or [top/bottom, right/left]
  padding : [0, 0],
  // '#RRGGBB' or 'rgb(R, G, B)' or 'rgba(R, G, B, A)'
  // Notice that 'fillStyle' will override this parameter
  // 注意fillStyle属性会覆盖此属性
  color : '#FFF', 
  // See the section 'Pattern/Style Definition' above.
  // 请查看上面的“样式定义”章节
  fillStyle : {
    type: 'linearGradient',
    scope: 'line',
    x0: 0,
    y0: 0,
    x1: 1,
    y1: 0,
    colorStops: [
      {
        offset: 0,
        color: '#FFF'
      },
      {
        offset: 1,
        color: '#000'
      }
    ]
  },
  strokeWidth : 1,
  // See the section 'Pattern/Style Definition' above.
  // 请查看上面的“样式定义”章节
  strokeStyle : '#CCC',
  shadowColor : '#000',
  shadowBlur : 5,
  shadowOffsetX : 5,
  shadowOffsetY : 5,
  // See the section 'Pattern/Style Definition' above. Support background drawing.
  // 请查看上面的“样式定义”章节，用于添加背景
  backgroundStyle : '#CCC'
};

const image = renderTextLikeDocument('Hello World', 100, style);