用canvas实现一个简单的画板

最新推荐文章于 2024-05-08 16:38:56 发布

阚学霸

最新推荐文章于 2024-05-08 16:38:56 发布

阅读量495

点赞数

文章标签： javascript 前端 html5 canvas

本文链接：https://blog.csdn.net/weixin_42117093/article/details/122895622

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" style="border:1px solid #ccc;" width="500" height="300"></canvas>
  <button id="btn">清除</button>
</body>
  <script>
      var canvas = document.querySelector('#canvas');
      var btn = document.querySelector('#btn');
      var ctx = canvas.getContext('2d');
      var isMove = false;
      //鼠标事件
      canvas.onmousedown = function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        ctx.moveTo(x, y); // 为了第二次画的时候，起始坐标为当前鼠标位置
        isMove = true;
      }
      canvas.onmousemove = function (e) {
        var x = e.offsetX;
        var y = e.offsetY
        if (isMove) {
          ctx.lineTo(x, y);
          ctx.stroke();
        }
      }
      canvas.onmouseup = function (e) {
        isMove = false;
      }
      btn.onclick= function () {
        ctx.beginPath()// 不加这一行，清除后，再次画上一次的也会出来
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
  </script>
</html>

阚学霸

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用canvas实现一个简单的画板

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫