js使用canvas实现图片拖拽涂抹区域生成mask遮罩图片效果代码-html代码-BFW代码库

js使用canvas实现图片拖拽涂抹区域生成mask遮罩图片效果代码

代码语言：html

所属分类：拖放

代码描述：js使用canvas实现图片拖拽涂抹区域生成mask遮罩图片效果代码，适合ai修改图片等场景。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
</head>

<body>
    <div style="position:relative;width:500px;height:400px;">
        <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" style="position:absolute;width:500px;height:400px;" />
        <canvas style="position:absolute;" id="canvas" width="500" height="400"></canvas>
    </div>
    <button id="export">导出遮罩图片</button>

    <script>
        var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
        
          var isDrawing = false;
          var startPoint = { x: 0, y: 0 };
          var points = [];
        
          canvas.addEventListener('mousedown', function(e) {
            isDrawing = true;
            startPoint.x = e.clientX - canvas.offsetLeft;
            startPoint.y = e.clientY - canvas.offsetTop;
            points.push({ x: startPoint.x, y: startPoint.y });
            ctx.moveTo(startPoint.x, startPoint.y);
          });
        
          canvas.addEventListener('mousemove', function(e) {
            if (isDrawing) {
              var x = e.clientX - canvas.offsetLeft;
              var y = e.clientY - canvas.offsetTop;
              points.push({ x: x, y: y });
              ctx.lineTo(.........完整代码请登录后点击上方下载按钮下载查看