基于Scrawl-canvas的粒子放射发射canvas动画代码-html代码-BFW代码库

基于Scrawl-canvas的粒子放射发射canvas动画代码

代码语言：html

所属分类：粒子

代码描述：基于Scrawl-canvas的粒子放射发射canvas动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  font-family: sans-serif;
}

#reportmessage {
	padding: 1em;
	background-color: rgba(0, 120, 0, .4);
	white-space: pre-wrap;
}

h2, h3 {
  text-align: center;
}

#porthole {
  margin: 0 auto 1em;
}
</style>



</head>

<body translate="no" >
  <h2>Scrawl-canvas v8 - DOM tween stress test</h2>




<h3>Click on star field to add more stars</h3>

<div id="porthole" data-stack></div>

<p id="reportmessage"></p>
 

      <script type="module">
import scrawl from "https://unpkg.com/scrawl-canvas@8.2.2";

// SCENE SETUP

// Prep the Scrawl-canvas stack element
let porthole = scrawl.library.artefact.porthole;

porthole.set({
  width: 600,
  height: 600,
  css: {
    overflow: "hidden",
    borderRadius: "50%",
    backgroundColor: "black"
  }
});

// Create new elements and their associated Tweens
// (each star element has its own Tween)
let starCount = 0,
  addNumber = 100;

let makeStars = function (buildNumber) {
  for (let i = 0; i < buildNumber; i++) {
    starCount++;

    let star = porthole.addNewElement({
      name: `star_${starCount}`,
      tag: "div",

      width: 6,
      height: 6,
      startX: 300,
      startY: 300,
      handleX: "center",
      handleY: "center",

      noUserInteraction: true,
      noDeltaUpdates: true,
      noPositionDependencies: true,
      noFilters: true,
      noPathUpdates: true,

      purge: "all",

      css: {
        backgroundColor: "white",
        borderRadius: "50%"
      }
.........完整代码请登录后点击上方下载按钮下载查看