怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  822 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

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>
posted on   超级无敌美少男战士  阅读(77)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示