Canvas实现画板

程序人~

于 2024-05-08 16:38:56 发布

阅读量761

点赞数 15

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41043186/article/details/138577610

版权

Canvas如何实现画板功能。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>Canvas 画板</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <button id="clear-button">clear-button</button>
  <script>
    // 获取 Canvas 元素和上下文
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    // 设置画笔初始状态
    var isDrawing = false; // 是否正在画线
    var isErasing = false; // 是否正在擦除
    var lastX = 0; // 上一个点的 X 坐标
    var lastY = 0; // 上一个点的 Y 坐标

    // 监听鼠标按下事件
    canvas.addEventListener('mousedown', startDrawing);
    // 监听鼠标移动事件
    canvas.addEventListener('mousemove', draw);
    // 监听鼠标松开事件
    canvas.addEventListener('mouseup', stopDrawing);
    // 监听鼠标离开画布事件
    canvas.addEventListener('mouseleave', stopDrawing);

    // 监听触摸屏按下事件
    canvas.addEventListener('touchstart', startDrawing);
    // 监听触摸屏移动事件
    canvas.addEventListener('touchmove', draw);
    // 监听触摸屏松开事件
    canvas.addEventListener('touchend', stopDrawing);

    // 开始绘制
    function startDrawing(e) {
      isDrawing = true;
      [lastX, lastY] = [e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY];
    }

    // 绘制线条或擦除
    function draw(e) {
      if (!isDrawing) return;

      var newX = e.clientX || e.touches[0].clientX;
      var newY = e.clientY || e.touches[0].clientY;

      if (isErasing) {
        context.clearRect(newX - 10, newY - 10, 20, 20); // 使用橡皮擦大小为 20x20 的矩形来清除画布上的内容
      } else {
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(newX, newY);
        context.stroke();
        [lastX, lastY] = [newX, newY];
      }
    }

    // 停止绘制
    function stopDrawing() {
      isDrawing = false;
    }

    // 监听清除按钮点击事件
    var clearButton = document.getElementById('clear-button');
    clearButton.addEventListener('click', clearCanvas);

    // 清除画布
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
  </script>
</body>
</html>

程序人~

关注

15
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现画板

/ 使用橡皮擦大小为 20x20 的矩形来清除画布上的内容。// 获取 Canvas 元素和上下文。Canvas如何实现画板功能。// 上一个点的 X 坐标。// 上一个点的 Y 坐标。// 监听鼠标离开画布事件。// 监听清除按钮点击事件。// 监听触摸屏按下事件。// 监听触摸屏移动事件。// 监听触摸屏松开事件。// 设置画笔初始状态。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。// 绘制线条或擦除。
复制链接

扫一扫