<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawing Animation Editor</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
}
.editor, .preview {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
.editor {
border-right: 1px solid #ccc;
overflow-y: auto;
}
h1 {
margin-top: 0;
}
canvas {
border: 1px solid #ccc;
background: #fff;
}
.controls, .frame-controls, .animation-controls, .frame-nav {
margin-top: 10px;
}
.controls label,
.animation-controls label {
margin-right: 10px;
}
button {
margin: 5px 5px 5px 0;
padding: 5px 10px;
}
.preview {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="editor">
<h1>Drawing Animation Editor</h1>
<!-- Drawing Canvas -->
<canvas id="drawingCanvas" width="500" height="400"></canvas>
<!-- Drawing Tools -->
<div class="controls">
<label>
Brush Color:
<input type="color" id="brushColor" value="#000000">
</label>
<label>
Brush Size:
<input type="range" id="brushSize" min="1" max="20" value="3">
</label>
<button id="clearCanvas">Clear Canvas</button>
</div>
<!-- Frame Controls -->
<div class="frame-controls">
<button id="saveFrame">Save Frame</button>
<button id="prevFrame">Previous Frame</button>
<button id="nextFrame">Next Frame</button>
<button id="deleteFrame">Delete Frame</button>
</div>
<div class="frame-nav">
Frame: <span id="currentFrame">0</span> / <span id="totalFrames">0</span>
</div>
<!-- Animation Controls -->
<div class="animation-controls">
<label>
Frame Duration (ms):
<input type="number" id="frameDuration" value="500" min="100">
</label>
<button id="playAnimation">Play Animation</button>
<button id="stopAnimation">Stop Animation</button>
</div>
</div>
<div class="preview">
<h1>Animation Preview</h1>
<!-- Preview Canvas -->
<canvas id="previewCanvas" width="500" height="400"></canvas>
</div>
<script>
// Drawing editor variables
const drawingCanvas = [Link]('drawingCanvas');
const drawingCtx = [Link]('2d');
const brushColorInput = [Link]('brushColor');
const brushSizeInput = [Link]('brushSize');
const clearCanvasBtn = [Link]('clearCanvas');
// Frame controls and state
const saveFrameBtn = [Link]('saveFrame');
const prevFrameBtn = [Link]('prevFrame');
const nextFrameBtn = [Link]('nextFrame');
const deleteFrameBtn = [Link]('deleteFrame');
const currentFrameDisplay = [Link]('currentFrame');
const totalFramesDisplay = [Link]('totalFrames');
const frameDurationInput = [Link]('frameDuration');
// Animation controls and preview variables
const playAnimationBtn = [Link]('playAnimation');
const stopAnimationBtn = [Link]('stopAnimation');
const previewCanvas = [Link]('previewCanvas');
const previewCtx = [Link]('2d');
let isDrawing = false;
let currentBrushColor = [Link];
let currentBrushSize = [Link];
// Array to store frames (each frame is a data URL image)
let frames = [];
let currentFrameIndex = -1;
// Animation interval handle
let animationInterval = null;
// Initialize drawing canvas with a white background
function initCanvas() {
[Link] = '#fff';
[Link](0, 0, [Link], [Link]);
}
initCanvas();
// Update frame navigation display
function updateFrameDisplay() {
[Link] = currentFrameIndex + 1;
[Link] = [Link];
}
// Drawing events for canvas
[Link]('mousedown', (e) => {
isDrawing = true;
[Link]();
[Link]([Link], [Link]);
});
[Link]('mousemove', (e) => {
if (!isDrawing) return;
[Link]([Link], [Link]);
[Link] = currentBrushColor;
[Link] = currentBrushSize;
[Link] = 'round';
[Link] = 'round';
[Link]();
});
[Link]('mouseup', () => {
isDrawing = false;
});
[Link]('mouseout', () => {
isDrawing = false;
});
// Update brush settings
[Link]('change', (e) => {
currentBrushColor = [Link];
});
[Link]('change', (e) => {
currentBrushSize = [Link];
});
// Clear the drawing canvas
[Link]('click', () => {
[Link](0, 0, [Link], [Link]);
initCanvas();
});
// Save the current canvas as a frame
[Link]('click', () => {
const dataURL = [Link]();
if (currentFrameIndex === [Link] - 1) {
// Append new frame if on the last frame
[Link](dataURL);
currentFrameIndex = [Link] - 1;
} else if (currentFrameIndex >= 0) {
// Overwrite the existing frame if editing an earlier one
frames[currentFrameIndex] = dataURL;
} else {
// No frames exist; add the first one
[Link](dataURL);
currentFrameIndex = 0;
}
updateFrameDisplay();
alert('Frame saved!');
});
// Load a specific frame into the drawing canvas
function loadFrame(index) {
if (index >= 0 && index < [Link]) {
const img = new Image();
[Link] = function() {
[Link](0, 0, [Link], [Link]);
[Link](img, 0, 0, [Link],
[Link]);
};
[Link] = frames[index];
} else {
// Clear canvas if no frame is available
[Link](0, 0, [Link], [Link]);
initCanvas();
}
}
// Navigate to previous frame
[Link]('click', () => {
if (currentFrameIndex > 0) {
currentFrameIndex--;
loadFrame(currentFrameIndex);
updateFrameDisplay();
}
});
// Navigate to next frame
[Link]('click', () => {
if (currentFrameIndex < [Link] - 1) {
currentFrameIndex++;
loadFrame(currentFrameIndex);
updateFrameDisplay();
}
});
// Delete current frame
[Link]('click', () => {
if (currentFrameIndex >= 0 && [Link] > 0) {
[Link](currentFrameIndex, 1);
if (currentFrameIndex >= [Link]) {
currentFrameIndex = [Link] - 1;
}
loadFrame(currentFrameIndex);
updateFrameDisplay();
}
});
// Play animation on the preview canvas by cycling through frames
[Link]('click', () => {
const frameDuration = parseInt([Link], 10) || 500;
if ([Link] === 0) return;
let playIndex = 0;
animationInterval = setInterval(() => {
const img = new Image();
[Link] = function() {
[Link](0, 0, [Link], [Link]);
[Link](img, 0, 0, [Link],
[Link]);
};
[Link] = frames[playIndex];
playIndex = (playIndex + 1) % [Link];
}, frameDuration);
});
// Stop animation playback
[Link]('click', () => {
clearInterval(animationInterval);
animationInterval = null;
});
// Start with an empty frame (optional: auto-create first frame)
function initFrames() {
frames = [];
currentFrameIndex = -1;
updateFrameDisplay();
}
initFrames();
</script>
</body>
</html>
