simple heat的使用

<script setup lang="ts">
import { SimpleHeat } from "simpleheat-ts";

import * as dat from "dat.gui";

let frame: number | null = null;

const oCanvas = document.createElement("canvas");
oCanvas.width = window.innerWidth * 0.75;
oCanvas.height = window.innerHeight * 0.75;
oCanvas.style.border = "5px solid red";

const data = [
  [0, 0, 100],
  [window.innerWidth * 0.1, window.innerHeight * 0.1, 100],
  [window.innerWidth * 0.2, window.innerHeight * 0.2, -100],
  [window.innerWidth * 0.3, window.innerHeight * 0.3, 100],
  [window.innerWidth * 0.4, window.innerHeight * 0.4, 100],
  [window.innerWidth * 0.5, window.innerHeight * 0.5, 100],
  [window.innerWidth * 0.6, window.innerHeight * 0.6, 100],
  [window.innerWidth * 0.7, window.innerHeight * 0.7, 100],
  [window.innerWidth * 0.75, window.innerHeight * 0.75, 100],
];

const heat = new SimpleHeat(
  document.createElement("canvas"),
  document.createElement("canvas")
);

heat.data(data);
heat.max(100);
document.body.appendChild(oCanvas);

draw();

function draw() {
  heat.draw(oCanvas.getContext("2d")!, 0.5);
  frame = null;
}

document.getElementsByTagName("canvas")[0].onmousemove = function (e) {
  heat.add([e.clientX, e.clientY, -100]);
  frame = frame || window.requestAnimationFrame(draw);
};
</script>

<template></template>

<style scoped></style>

heatmap-ts的使用

<script setup lang="ts">
import HeatMap from "heatmap-ts";

const oCanvas = document.createElement("canvas");
oCanvas.style.border = "5px solid red";

const heatMap = new HeatMap({
  maxOpacity: 0.6,
  radius: 50,
  blur: 0.9,
  canvas: oCanvas,
  width: window.innerWidth,
  height: window.innerHeight,
});

heatMap.setData({
  max: 100,
  min: 1,
  data: [
    {
      x: 0,
      y: 0,
      value: 100,
      radius: 10,
    },
    {
      x: window.innerWidth * 0.1,
      y: window.innerHeight * 0.1,
      value: 100,
      radius: 50,
    },
    {
      x: window.innerWidth * 0.2,
      y: window.innerHeight * 0.2,
      value: 100,
      radius: 100,
    },
    {
      x: window.innerWidth * 0.3,
      y: window.innerHeight * 0.3,
      value: 100,
      radius: 50,
    },
    {
      x: window.innerWidth * 0.5,
      y: window.innerHeight * 0.5,
      value: 100,
      radius: 20,
    },
    {
      x: window.innerWidth * 0.6,
      y: window.innerHeight * 0.6,
      value: 100,
      radius: 20,
    },
    {
      x: window.innerWidth * 0.7,
      y: window.innerHeight * 0.7,
      value: 100,
      radius: 20,
    },
    {
      x: window.innerWidth * 0.8,
      y: window.innerHeight * 0.8,
      value: 100,
      radius: 20,
    },
    {
      x: window.innerWidth * 0.9,
      y: window.innerHeight * 0.9,
      value: 100,
      radius: 20,
    },
    {
      x: window.innerWidth * 1.0,
      y: window.innerHeight * 1.0,
      value: 100,
      radius: 20,
    },
  ],
});

document.body.appendChild(oCanvas);
</script>

<template></template>

<style scoped></style>