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();
    .........完整代码请登录后点击上方下载按钮下载查看