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