<!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;
? ? });文章來(lái)源：http://www.zghlxwxcb.cn/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>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-476486.html
到了這里，關(guān)于實(shí)現(xiàn)簡(jiǎn)單手寫板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
