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" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0