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

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

06-08 14:00