canvas滚动多彩笔刷绘制白墙效果代码-html代码-BFW代码库

canvas滚动多彩笔刷绘制白墙效果代码

代码语言：html

代码描述：canvas滚动多彩笔刷绘制白墙效果代码

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    body {
      margin: 0;
      background: #eee;
      height: 100vh;
      min-height: 100vh;
    }

    .lines {
      display: block;
      margin: 0 auto;
      background: #fff;
      z-index: 2;
    }

    .brushes {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: transparent;
    }

    .status {
      position: fixed;
      top: 0;
      left: 10px;
      color: #777;
      font-size: 12px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <p class="status"></p>
  <script type="text/javascript">
    const dpr = Math.min( window.devicePixelRatio, 2 );
    const body = document.body;
    const status = document.querySelector( '.status' );
    const modes = [
      { id: 'brush', t: 0 },
      { id: 'line', t: 0 },
      { id: 'dash', t: 4 },
      { id: 'worm', t: 4 }
    ];

    let width,
        height,
        canvasWidth,
        canvasHeight;

    const brushDefaults = { x: 0.5, tx: 0.5, ttx: 0.5, y: 0, ty: 0.9, w: 1, tw: 1 };
    const brushCanvas = createCanvas( 'brushes' );
    const brushContext = brushCanvas.getContext( '2d' );

    let mode = 0;

    let canvases = [];
    let brushes = [];

    let scrollTop = 0;
    let currentTop;
    let lastTop;
    let currentMode = modes[0];

    function reset() {

      width = window.innerWidth;
      height = window.innerHeight;
      canvasWidth = width * dpr;
      canvasHeight = height * dpr;

      currentTop = 0;
      lastTop = -1;

      canvases.forEach( o => o.canvas.remove() );
      canvases = [];

      resizeCanvas( brushCanvas );
      brushContext.scale( dpr, dpr );
      brushContext.globalCompositeOperation = 'multiply';

      brushes = [
        { ...brushDefaults, color: 'coral' },
        { ...brushDefaults, color: 'indigo' },
        { ...brushDefaults, color: 'deepskyblue' },
        { ...brushDefaults, color: 'antiquewhite' },
        { ...brushDefaults, color: '#222' }
      ];

      brushes.forEach( brush => brush.points = [] );

      build();

    }

    function update() {

      scrollTop = Math.max( document.documentElement.scrollTop, 0 );

      build();

      if( Math.abs( scrollTop - currentTop ) >= 1 || lastTop === -1 ) {
        step();
        step();
      }

      status.innerHTML = `scroll + click | mode: ${currentMode.id}`;

      paintBrushes();

      requestAnimationFrame( update );

    }

    function build() {

      if( ( body.scrollHeight - scrollTop ) / height < 2 ) {
        let canvasesToAdd = 6;
        while( --canvasesToAdd ) {
          const canvas = createCanvas( 'lines' );
          const context = canvas.getContext( '2d' );
          const top = canvas.offsetTop;

          canvases.push({ canvas, context, top, visibility: 'visible' });

          context.scale( dpr, dpr );

          if( top !== 0 ) {
            context.beginPath();
            context.fillStyle = '#ccc';
            context.strokeStyle = '#ccc';
            context.lineWidth = 1;
            context.moveTo( width - 10, 18 );
            context.lineTo( width - 40, 18 );
            context.stroke();
            context.textAlign = 'right';
            context.font = '12px Monospace';
            context.fillText( top.toLocaleString() + 'px', width - 50, 22 );
          }

          context.translate( 0, -top );
          context.globalCompositeOperation = 'multiply';
        }
      }

    }

    function step() {

      lastTop = currentTop;
      currentTop = Math.round( currentTop + ( scrollTop - currentTop ) * 0.2 );

      const span = width * 0.9;
      const left = width/2 - span/2;

      const velocity = Math.min( Math.abs( currentTop - lastTop ) / 200, 0.1 );

      brushes.forEach( (brush,i) => {
        brush.tx += ( brush.ttx - brush.tx ) * velocity * 1.2;
        brush.x += ( brush.tx - brush.x ) * velocity;
        brush.y += ( brush.ty - brush.y ) * velocity * ( brush.w * 0.25);
        brush.w += ( brush.tw - .........完整代码请登录后点击上方下载按钮下载查看