实现简单手写板

NLeRnotfalled

已于 2023-06-08 11:55:12 修改

阅读量622

点赞数 1

文章标签： html 数学建模 java

于 2023-06-08 11:40:22 首次发布

本文链接：https://blog.csdn.net/weixin_44337267/article/details/131104621

版权

<!DOCTYPE html>

<html>

<head>

<title>Canvas with Eraser</title>

<style>

canvas {

border: 1px solid #ccc;

}

</style>

</head>

<body>

<div>

<button id="clear">Clear</button>

<option value="round">Round</option>

<option value="square">Square</option>

</select>

<button id="eraser">Eraser</button>

</div>

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;
});

function draw() {
if (video.paused || video.ended) {
return;
}
context.drawImage(video, 0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
}
</script>
</body>
</html>