JSFiddle - React, Tailwind, and code Playground

by liu qi

HTML

<div id='box'></div>
<button>每个图形都有特殊的鼠标形状</button>
<!-- <script src="../dist/js/bvas.js"></script> -->
<script src="https://www.bougieblog.cn/bvas.min.js"></script>

CSS

html,
body,
div {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#box {
  position: absolute;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

JavaScript

let bvas = new Bvas({
  el: '#box'
})
let layer = new Bvas.Layer().addTo(bvas)
let rm = Math.random
let cursors = ['pointer', 'move', 'text', 'crosshair', 'wait', 'help']

function rc() {
  return cursors[Math.floor(cursors.length * rm())]
}

function rr() {
  return Math.floor(rm() * 255)
}
let {
  offsetWidth,
  offsetHeight
} = document.querySelector('#box')
for (let i = 0; i < 20; i++) {
  new Bvas.Point({
    style: {
      position: [offsetWidth * rm(), offsetHeight * rm()],
      size: rm() * 10 + 20,
      color: '#' + (rr() << 16 | rr() << 8 | rr()).toString(16),
      cursor: rc(),
      zIndex: Math.floor(rm()*20)
    }
  }).addTo(layer)
}