canvas实现油画绘制动画效果代码-html代码-BFW代码库

canvas实现油画绘制动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现油画绘制动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap");
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: #3c3c3c;
}

a:hover {
  text-decoration: none;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.canvas {
  margin: 0 0 1rem 0;
  box-shadow: 8px 4px 10px -42px rgba(0, 0, 0, 0.031), 64px 32px 80px -42px rgba(0, 0, 0, 0.07);
}
</style>


</head>

<body >
  <div class="container">
  <canvas class="canvas js-lines"></canvas>

</div>

  
      <script  >
const TAU = Math.PI * 2;

const W = 500;
const H = W;

const getPixelIndex = (x, y, imageData) => (Math.floor(x) + Math.floor(y) * imageData.width) * 4;
const clamp = (value, min, max) => Math.max(min, Math.min(value, max));

let points = [];

const ctx = document.querySelector('.js-lines').getContext('2d');
const ctxGhost = document.createElement('canvas').getContext('2d');
const imageUrl = '//repo.bfw.wiki/bfwrepo/image/626350133e0be.png';

const loadImage = () => {
  const img = new Image();
  img.crossOrigin = '';

  return new Promise(function (resolve, reject) {
    img.addEventListener('load', () => {
      resolve(img);
    });

    img.src = imageUrl;
  });
};

const setupCanvas = (width, height) => {
  ctx.canvas.width = width;
  ctx.canvas.height = height;
  ctxGhost.canvas.width = width;
  ctxGhost.canvas.height = height;
};

const getImageData = (ctxDest, image) => {
  ctx.........完整代码请登录后点击上方下载按钮下载查看