scrawl-canvas实现录制canvas绘画创作艺术动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：scrawl-canvas实现录制canvas绘画创作艺术动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  font-family: sans-serif;
  text-align: center;
}
#my-image-store {
  display: none;
}
p {
  max-width: 48rem;
  margin: 0 auto;
}

canvas {
  width: 100%;
  height: 100%;
}

.canvas-container {
  overflow: hidden;
  resize: both;
  border: 1px solid black;
  width: 640px;
  height: 480px;
  min-width: 320px;
  min-height: 240px;
  max-width: 1280px;
  max-height: 720px;
  margin: 1rem auto;
}

.controls {
  display: grid;

  grid-template-columns: 1fr 2fr 1fr 2fr;
  grid-column-gap: 2px;

  grid-template-rows: auto;
  grid-row-gap: 2px;

  font-size: 12px;

  margin-bottom: 1rem;
}

.controls div {
  box-sizing: border-box;
  justify-self: stretch;
  align-self: center;
  text-align: center;
  padding: 6px 0;
}

.label {
  font-weight: bold;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: palegreen;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: palegoldenrod;
}

.lavender {
  background-color: lavender;
}

.controls select {
  border: 0;
}

.controls input {
  width: 70%;
}

button {
  font-size: 1.4rem;
  padding: 0.4rem;
  width: 280px;
  margin-top: 1rem;
  background-color: darkred;
  color: yellow;
}
</style>




</head>

<body >
  <h2>创建自己的DIY艺术视频</h2>
<p>将图像拖放到画布上，开始对其进行艺术处理。随时点击录制按钮录制您的艺术创作过程。当您停止录制时，将下载视频。可以通过拖动右下角来调整画布（和视频输出）的大小。注意：这个代码在Chrome和（可能）Firefox中可以工作！</p>

<div>
  <button id="my-record-video-button">录制视频</button>
</div>
<div class="canvas-container">
  <canvas id="mycanvas"></canvas>
</div>

<div class="controls">

  <div class="yellow label">Line width</div>
  <div class="yellow"><input class="controlItem" id="lineWidth" type="range" value="4" min="1" max="20" step="1" /></div>

  <div class="yellow label">Line opacity</div>
  <div class="yellow"><input class="controlItem" id="lineOpacity" type="range" value="1" min="0" max="1" step="0.01" /></div>

  <div class="yellow label">Line length multiplier</div>
  <div class="yellow"><input class="controlItem" id="lineLengthMultiplier" type="range" value="20" min="1" max="100" step="1" /></div>

  <div class="yellow label">Line length start</div>
  <div class="yellow"><input class="controlItem" id="lineLengthStart" type="range" value="5" min="0" max="100" step="1" /></div>

  <div class="blue label">Offset X</div>
  <div class="blue"><input class="controlItem" id="offsetX" type="range" value="0" min="-100" max="100" step="1" /></div>

  <div class="blue label">Offset Y</div>
  <div class="blue"><input class="controlItem" id="offsetY" type="range" value="0" min="-100" max="100" step="1" /></div>

  <div class="blue label">Rotation multiplier</div>
  <div class="blue"><input class="controlItem" id="rotationMultiplier" type="range" value="90" min="0" max="360" step="1" /></div>

  <div class="blue label">Rotation start</div>
  <div class="blue"><input class="controlItem" id="rotationStart" type="range" value="0" min="0" max="360" step="1" /></div>

  <div class="lavender label">Lines to add</div>
  <div class="lavender"><input class="controlItem" id="linesToAdd" type="range" value="50" min="0" max="200" step="1" /></div>

  <div class="lavender label">Line blend</div>
  <div class="lavender">
    <select class="controlItem" id="lineBlend">
      <option value="source-over">normal</option>
      <option value="color-burn">color-burn</option>
      <option value="color-dodge">color-dodge</option>
      <option value="darken">darken</option>
      <option value="difference">difference</option>
      <option value="exclusion">exclusion</option>
      <option value="hard-light">hard-light</option>
      <option value="lighten">lighten</option>
      <option value="lighter">lighter</option>
      <option value="multiply">multiply</option>
      <option value="overlay">overlay</option>
      <option value="screen">screen</option>
      <option value="soft-light">soft-light</option>
      <option value="color">color</option>
      <option value="hue">hue</option>
      <option value="luminosity">luminosity</option>
      <option value="saturation">saturation</option>
    </select>
  </div>

  <div class="pink label">Noise scale</div>
  <div class="pink"><input class="controlItem" id="noiseScale" type="range" value="80" min="40" max="120" step="1" /></div>

</div>

<div id="my-image-store">
  <img src="//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png" id="iris" class="flowers" crossOrigin="anonymous" />
</div>

<p>Learn more on the <a href="https://scrawl-v8.rikweb.org.uk/">Scrawl-canvas v8</a> homepage</p>

<script type="module">
import scrawl from "https://unpkg.com/scrawl-canvas@8.5.4";

let canvas = scrawl.library.artefact.mycanvas;

const dimension = 1200;

canvas
  .set({
    fit: "cover",
    checkForResize: true
  })
  .setBase({
    dimensions: [dimension, dimension]
  });

scrawl.importDomImage(".flowers");

const backgroundImage = scrawl.makePicture({
  name: "background",
  asset: "iris",
  dimensions: [dimension, dimension],
  copyDimensions: ["100%", "100%"],
  method: "none"
});

let noiseAsset = scrawl.makeNoiseAsset({
  name: "my-noise-generator",
  width: dimension,
  height: dimension,
  noiseEngine: "improved-perlin",
  color: "gradient",
  scale: 80
});

let impressionistAsset = scrawl.makeRawAsset({
  name: "pretend-van-gogh",

  userAttributes: [
    {
      key: "lineWidth",
      defaultValue: 4
    },
    {
      key: "lineLengthMultiplier",
      defaultValue: 20
    },
    {
      key: "lineLengthStart",
      defaultValue: 5
    },
    {
      key: "linesToAdd",
      defaultValue: 50
    },
    {
      key: "lineBlend",
      defaultValue: "source-over"
    },
    {
      key: "lineOpacity",
      defaultValue: 1
    },
    {
      key: "offsetX",
      defaultValue: 0
    },
    {
      key: "offsetY",
      defaultValue: 0
    },
    {
      key: "rotationMultiplier",
      defaultValue: 90
    },
    {
      key: "rotationStart",
      defaultValue: 0
    },
    {
      key: "canvasWidth",
      defaultValue: dimension
    },
    {
      key: "canvasHeight",
      defaultValue: dimension
    },
    {
      key: "background",
      defaultValue: false,
      setter: function (item) {
        this.background = item;
        this.dirtyBackground = true;
      }
    },
    {
      key: "noise",
      defaultValue: false,
      setter: function (item) {
        thi.........完整代码请登录后点击上方下载按钮下载查看