使用canvas在文本段落字里行间插入自适应曲线图

draw sparkline with canvas inside text lines

h5, canvas, line, stock

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1336
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Data
 */

let stonks = document.querySelectorAll(".stonk");

let data = [
  [
    420,
    700,
    500,
    480,
    460,
    490,
    390,
    420,
    550,
    340,
    320,
    240,
    180,
    160,
    200,
    40,
    0
  ],
  [1, 3, 2, 3, 1, 2, 3]
];

const options = {
  lineWidth: 2,
  color: "#E3342F"
};

/**
 * Class
 */

class Stonk {
  constructor(wrapper, data, settings = {}) {
    const defaults = {
      width: 80,
      color: "#000000",
      lineWidth: 1
    };

this.settings = Object.assign(defaults, settings);
    this.wrapper = wrapper;
    this.data = data;
    this.normalData = [];
    this.canvas = null;
    this.ctx = null;
    this.dimes = { w: 0, h: 0 };
  }

draw() {
    this._buildCanvas();
    this._normalizeData(this.data);
    this._drawData();
  }

_drawData() {
    let ctx = this.ctx;
    let { w, h } = this.dimes;
    w = w - this.settings.lineWidth / 2;
    h = h - this.settings.lineWidth / 2;
    let nd = this.normalData;
    let step = w / (this.data.length - 1);
    let tick = this.settings.lineWidth / 2;

ctx.strokeStyle = this.settings.color;
    ctx.lineWidth = this.settings.lineWidth;

ctx.beginPath();

ctx.moveTo(tick, h - nd[0]);

for (var i = 1; i <= nd.length - 1; i++) {
      tick += step;
      ctx.lineTo(tick, h - nd[i]);
    }

ctx.stroke();
  }

_buildCanvas() {
    let canvas = document.createElement("canvas");
    let absoluteDimes;

this.wrapper.style.cssText += `
      position: relative;
      display: inline-block;
      line-height: 1;
      height: 0.9em;
    `;

// Temporarily set the height so we can calculate the bounding
    canvas.style.height = "100%";
    canvas.style.width = `${this.settings.width}px`;

// Add it to the document to return the bounding
    this.canvas = canvas;
    this.ctx = this.canvas.getContext("2d");
    this.wrapper.appendChild(this.canvas);
    absoluteDimes = this.canvas.getBoundingClientRect();

const { width: w, height: h } = absoluteDimes;
    this.dimes = { w, h: Math.floor(h) };

// Set absolute attributes
    this.canvas.setAttribute("height", this.dimes.h);
    this.canvas.setAttribute("width", this.dimes.w);

// Clean up
    this.canvas.removeAttribute("style");
  }

// Utils

_normalizeData(array) {
    let min = Math.min(...array);
    let max = Math.max(...array);

this.data.forEach((v) => {
      let percentage = this._scaleBetween(v, 0, 100, min, max);
      let h = (this.dimes.h - this.settings.lineWidth) * (percentage / 100);
      this.normalData.push(h);
    });
  }

_scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max) {
    return (
      ((maxAllowed - minAllowed) * (unscaledNum - min)) / (max - min) +
      minAllowed
    );
  }
}

/**
 * Mount
 */

stonks.forEach((s, idx) => {
  let stonk = new Stonk(s, data[idx], options).draw();
});

编译

CSS

HTML

draw sparkline with canvas inside text lines

h5, canvas, line, stock

编辑器支持Emmet

快捷键

draw sparkline with canvas inside text lines

h5, canvas, line, stock

HTML5 Canvas在线把文本或图像转成3D点云动画

在canvas使用圆形（circles）绘制各种模式图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：