bvas layer

by liu qi

HTML

<div id='box'></div>
<button>remove backgound layer</button>
<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'
})
// background layer
let bgLayer = new Bvas.Layer({
  style: {
    zIndex: 0
  }
}).addTo(bvas)

// foreground layer
let fgLayer = new Bvas.Layer({
  style: {
    zIndex: 1
  }
}).addTo(bvas)
let p2 = new Bvas.Point({
  style: {
    position: [150, 150],
    size: 100,
    color: 'green'
  }
}).addTo(fgLayer)
let p1 = new Bvas.Point({
  style: {
    position: [100, 100],
    size: 100
  }
}).addTo(bgLayer)

let isBgRemoved = false
document.querySelector('button').addEventListener('click', function() {
  this.innerHTML = isBgRemoved ? 'remove background layer' : 'add background layer'
  isBgRemoved ? bgLayer.addTo(bvas) : bgLayer.remove()
  isBgRemoved = !isBgRemoved
})