scrawl-canvas实现录制canvas绘画创作艺术动画效果代码
代码语言: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> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0