canvas绘制油画过程动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：canvas绘制油画过程动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  background: #121212;
}

.container, canvas {
  display: block;
  width: 500px;
  margin: 0 auto;
}

.canvas {
  background: #ccc;
  border-radius: 4px;
  display: block;
}

.translucent {
  opacity: 0.2;
  transition: opacity 0.3s;
}
.translucent:hover {
  opacity: 1;
}

.info, .art-name, .ctrls, .w-descr {
  display: block;
  margin: 5px 0;
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
  background: #d8d8d8;
  border-radius: 4px;
  font-size: 14px;
}

.art-name {
  letter-spacing: 0.1em;
  text-align: center;
}

.info__title {
  display: block;
  font-weight: bold;
}
.info__category {
  padding: 7px;
  padding-left: 1em;
  margin: 6px 0 0;
  background-color: #cacaca;
  border-radius: 4px;
}
.info__cap {
  display: block;
  margin: 0;
  font-weight: bold;
}
.info__list {
  padding: 0 0 0 1em;
  margin: 0;
  list-style: none;
}
.info__key {
  display: inline-block;
  width: 65px;
  text-align: right;
  font-weight: 500;
  margin-right: 0.3em;
  white-space: nowrap;
  font-family: monospace;
}

.ctrls__info, .ctrls__preset {
  font-size: 12px;
  color: black;
  margin: 15px 0 0;
  padding: 0;
}

.ctrls__preset {
  white-space: pre;
}

.mono {
  font-family: monospace;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  padding: 7px 11px;
  background-color: #ccc;
  font-size: 12px;
  outline: none;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: #b2b2b2;
}
.btn + .btn {
  margin-left: 5px;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <h1 class="art-name translucent">Snake Brush</h1>
  <canvas class="canvas" id="canvas"></canvas>
  <div class="w-descr translucent">
    <p>Used image: 'Girl with a Pearl Earring' by Johannes Vermeer (1665)</p>
  </div>
  <div class="info translucent"><span class="info__title">Controls:</span>
    <div class="info__category"><span class="info__cap">mouse</span>
      <ul class="info__list">
        <li><span class="info__key" style="width:110px">press & move:</span> mouse draw mode</li>
      </ul>
    </div>
    <div class="info__category"><span class="info__cap">keyboard</span>
      <ul class="info__list">
        <li><span class="info__key">'c':</span> clear background</li>
      </ul>
    </div>
  </div>
</div>
<!-- partial -->
  <script >
      //////////////////////////////////////////////////////////////////////////
//                       //                                             //
//   -~=Manoylov AC=~-   //                 Snake Brush                 //
//                       //                                             //
//////////////////////////////////////////////////////////////////////////
//                                                                      //
// Controls:                                                            //
//    mouse                                                             //
//      press & move: mouse draw mode                                   //
//                                                                      //
//    keyboard                                                          //
//        'c': clear canvas                                             //
//        '[': iters -= 3                                               //
//        ']': iters += 3                                               //
//        'z': brush step -= 3                                          //
//        'x': brush step += 3                                          //
//        'q': brush scale -= .1                                        //
//        'w': brush scale += .1                                        //
//////////////////////////////////////////////////////////////////////////
//                                                                      //
// Contacts:                                                            //
//    http://manoylov.tumblr.com/                                       //
//    https://codepen.io/Manoylov/                                      //
//    https://www.openprocessing.org/user/23616/                        //
//    https://twitter.com/ManoylovAC                                    //
//    https://www.facebook.com/epistolariy                              //
//////////////////////////////////////////////////////////////////////////
//                                                                      //
// used image: 'Girl with a Pearl Earring' by Johannes Vermeer (1665)   //
//////////////////////////////////////////////////////////////////////////

'use strict';
(function() {
  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    mouseX = 0,  mouseY = 0,
    width = 500, height = 500, mouseIsPressed = false;

  var imagesPathsArr =
    [      'data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看