七夕爱上女孩表白文字和鼠标特效-html代码-BFW代码库

七夕爱上女孩表白文字和鼠标特效

代码语言：html

所属分类：表白

代码描述：七夕爱上女孩表白文字和鼠标特效

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

canvas{
  background: repeating-linear-gradient(
    45deg,
    #2374C6,
    #2374C6 50px,
    #FFDD22 50px,
    #FFDD22 100px /* determines size */
  );
  display: block;
  cursor: crosshair;
  font-family: 'Amatic SC', cursive;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script>
!function (universe) {



  const GLOBAL_DEFAULTS = {

    background: null,
    padding: 0,
    fontSize: 50,
    lineHeight: 100,
    lineWidth: 2,
    fontFamily: 'sans-serif',
    weight: 'normal',
    baseline: 'middle',
    pointerRadius: 10,
    textAlign: 'center',
    verticalAlignment: 'top',
    strokeStyle: 'red',
    fillStyle: 'black',
    compositeOperation: 'source-over',
    horizontalAlignment: 'left' };




  class Util {

    static getWidest(strings, { fontSize, fontFamily } = {}) {

      let $canvas = document.createElement('canvas').getContext('2d');

      $canvas.font = `${fontSize}px ${fontFamily}`;

      let widest = $canvas.measureText(strings[0]).width;

      for (let i = 1; i < strings.length; i++) {
        if ($canvas.measureText(strings[i]).width > widest) widest = $canvas.measureText(strings[i]).width;
      }

      $canvas = null;

      return widest;

    }

    static getStringWidth(string, { fontSize, fontFamily } = {}) {

      let $canvas = document.createElement('canvas').getContext('2d');

      $canvas.font = `${fontSize}px ${fontFamily}`;

      let width = $canvas.measureText(string).width;

      $canvas = null;

      return width;

    }

    static pickRandom(choice) {
      return choice[~~(Math.random() * choice.length)];
    }

    static randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    }}




  class Component {

    constructor() {
      this.props = {}; //will hold flags and values to be shared with this component's children  (e.g. mouse coordinates)
    }

    setProps(prop, value) {this.props[prop] = value;}

    getProp(prop) {return this.props[prop];}

    onUpdate(method) {this.update = method.bind(this);}

    onRender(method) {this.render = method.bind(this);}

    onMount(method) {this.mount = method.bind(this);}}




  class BoundedComponent extends Component {

    constructor(width, height, { position = { x: 0, y: 0 }, padding = GLOBAL_DEFAULTS.padding, verticalAlignment = GLOBAL_DEFAULTS.verticalAlignment, horizontalAlignment = GLOBAL_DEFAULTS.horizontalAlignment } = {}) {
      super();
      this.width = width;
      this.height = height;
      this.position = position;
      this.renderingPosition = { x: null, y: null }; //will be calculated when the component is mounted in the scene
      this.padding = padding;
      this.verticalAlignment = verticalAlignment;
      this.horizontalAlignment = horizontalAlignment;
    }

    createSpaceProps(bounds) {

      const innerBounds = { x: null, y: null, w: null, h: null };
      const renderingPosition = { x: null, y: null };

      switch (this.verticalAlignment) {

        case 'top':
          innerBounds.y = bounds.y + this.padding;
          renderingPosition.y = bounds.y;
          break;

        case 'middle':
          innerBounds.y = bounds.y + bounds.h / 2 - this.height / 2 + this.pad.........完整代码请登录后点击上方下载按钮下载查看