js实现canvas水彩画板涂色上色点击效果代码-html代码-BFW代码库

js实现canvas水彩画板涂色上色点击效果代码

代码语言：html

所属分类：其他

代码描述：js实现canvas水彩画板涂色上色点击效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
      display: block;
    }
    html {
      height: 100%;
      overflow: hidden;
    }
    </style>

</head>

<body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
  <defs>
    <filter id="squiggly">
      <feTurbulence baseFrequency="0.22" numOctaves="3" result="noise" seed="0" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="7" />
    </filter>
  </defs>
</svg>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script type="text/javascript">
        console.clear();
    
    var twoPI = 2 * Math.PI;
    
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    
    
    var width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight;
    
    window.addEventListener('resize',function(){
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });
    
    document.body.appendChild(canvas);
    
    /* ///////////////////////////////////////// */
    
    function randomWiggle(wiggle) {
      return ( Math.random() * wiggle ) * ( Math.random() < 0.5 ? -1 : 1 )
    }
    
    
    var color = -25;
    function randomColor(){
      color = Math.floor( ( color % 360 ) + 25 + 15 * Math.random() );
      return 'hsl(' + color + ', 50%, 55%)';
    }
    
    
    /* //////////////////////////////////////// */
    
    function WaterColor(options) {
      if (!(this instanceof WaterColor)) { return new WaterColor(options); }
    
      for (var key in options) {
        if (options.hasOwnProperty(key)) { this[key] = options[key]; }
      }
    
      if ( !this.fill ) { this.fill = randomColor(); }
      this.c = Math.floor( Math.random() * 2 );
      this.render();
    }
    
    WaterColor.prototype = {
      sides: 6,
      x: 20,
      y: 20,
      ctx: false,
    
      speed: 0.3,
    
      maxPoints: 3000,
      maxRender: 5,
      
      scale: false,
    
      buildPoints(){
    
        var wiggle = this.size * 0.15,
            rotation = 0,
            x = -this.size, 
            y = 0,
            horizontal = Math.random() > 0.5,
            start = [ x, y ];
    
        this.points = [ start ];
    
        for (; rotation < twoPI; rotation += this.speed) {
    
          x += 
            this.size 
            * this.speed
            * Math.sin(rotation)
            * ( horizontal ? 1 : 0.7 )
            + randomWiggle( wiggle ); // * Math.cos( (rotation/twoPI) * twoPI ) );
    
          y += 
            this.size
            * this.speed
            * Math.cos(rotation)
            * ( horizontal ? 0.7 : 1 )
            + randomWiggle( wiggle );// * Math.cos( (rotation/twoPI) * twoPI) );
    
          this.points.push([ x, y ]);
        }
        
        
        this.points.push( start );
    
        this.originalPoints = this.points;
.........完整代码请登录后点击上方下载按钮下载查看