<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas with Eraser</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<input type="color" id="color">
<button id="clear">Clear</button>
<button id="undo">Undo</button>
<input type="range" id="brush-size" min="1" max="50" value="10">
<select id="brush-type">
<option value="round">Round</option>
<option value="square">Square</option>
<option value="butt">Butt</option>
</select>
<button id="eraser">Eraser</button>
</div>
<script>
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
var drawing = false
var color = '#000000'
var undoStack = []
var brushSize = 10
var brushType = 'round'
var eraserEnabled = false
canvas.addEventListener('mousedown', startDrawing)
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mouseup', stopDrawing)
canvas.setAttribute('width', 1000)
canvas.setAttribute('height', 500)
var colorInput = document.getElementById('color')
colorInput.addEventListener('change', function () {
color = colorInput.value
eraserEnabled = false
})
var clearButton = document.getElementById('clear')
clearButton.addEventListener('click', function () {
context.clearRect(0, 0, canvas.width, canvas.height)
undoStack = []
})
var undoButton = document.getElementById('undo')
undoButton.addEventListener('click', function () {
if (undoStack.length > 0) {
context.clearRect(0, 0, canvas.width, canvas.height)
undoStack.pop()
redraw()
}
})
var brushSizeInput = document.getElementById('brush-size')
brushSizeInput.addEventListener('change', function () {
brushSize = brushSizeInput.value
})
var brushTypeInput = document.getElementById('brush-type')
brushTypeInput.addEventListener('change', function () {
brushType = brushTypeInput.value
})
var eraserButton = document.getElementById('eraser')
eraserButton.addEventListener('click', function () {
eraserEnabled = true
})
function startDrawing(event) {
drawing = true
context.beginPath()
context.moveTo(event.offsetX, event.offsetY)
}
function draw(event) {
if (drawing) {
if (eraserEnabled) {
context.globalCompositeOperation = 'destination-out'
context.strokeStyle = 'rgba(0,0,0,1)'
context.lineWidth = brushSize
context.lineCap = brushType
} else {
context.globalCompositeOperation = 'source-over'
context.strokeStyle = color
context.lineWidth = brushSize
context.lineCap = brushType
}
context.lineTo(event.offsetX, event.offsetY)
context.stroke()
}
}
function stopDrawing() {
drawing = false
undoStack.push(canvas.toDataURL())
}
function redraw() {
var img = new Image()
img.onload = function () {
context.drawImage(img, 0, 0)
}
img.src = undoStack[undoStack.length - 1]
}
</script>
</body>
</html>
加入视频功能以后的涂鸦板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Doodle on Video</title>
<style>
video, canvas {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<video id="video" src="video.mp4" controls></video>
<canvas id="canvas"></canvas>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var drawing = false;
var lastX, lastY;
video.addEventListener('play', function() {
draw();
});
canvas.addEventListener('mousedown', function(e) {
drawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
});
canvas.addEventListener('mousemove', function(e) {
if (drawing) {
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
lastX = e.offsetX;
lastY = e.offsetY;
}
});
canvas.addEventListener('mouseup', function() {
drawing = false;
});文章来源：https://www.toymoban.com/news/detail-476486.html
function draw() {
if (video.paused || video.ended) {
return;
}
context.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
}
</script>
</body>
</html>文章来源地址https://www.toymoban.com/news/detail-476486.html
到了这里，关于实现简单手写板的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
