账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    canvas isPointPath 方法为啥在我这里不起作用
    32
    0
    <!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><style> html, body { margin: 0; }</style></head><body><canvas id="haha"></canvas></body><script>const canvas = document.getElementById('haha');const width = canvas.width = window.innerWidth;const height = canvas.height = window.innerHeight - 5;const ctx = canvas.getContext('2d');var points = [];var paths = [];var drawNow = false;var result = [];const draw = () => { paths = []; for (var i = 0; i < points.length; i++) { if (i == 0) { paths[i] = new Path2D(); } else { paths[i] = new Path2D(paths[i - 1]); } paths[i].moveTo(points[i][0].x, points[i][0].y); for (var j = 1; j < points[i].length; j++) { paths[i].lineTo(points[i][j].x, points[i][j].y); } } ctx.clearRect(0, 0, width, height); ctx.fillStyle = "green"; ctx.fill(paths[paths.length - 1], 'evenodd') ctx.stroke(paths[paths.length - 1]); }// 获取spot坐标const getPosition = (arr)=>{ let newarr = arr.flat(); var x = newarr.sort((a, b)=>{ return a.pagex - b.pagex }); var xMin = x[0].x; var xMax = x[x.length - 1].x; var y = newarr.sort((a, b)=>{ return a.pagey - b.pagey }); var yMin = y[0].y; var yMax = y[y.length - 1].y; for(var i = xMin; i < xMax; i++){ for(var j = yMin; j < yMax; j++){ if(ctx.isPointInPath(i, j, 'evenodd')){ result.push([i, j]); } } }; console.log(result)}canvas.onmousedown = function (e) { drawNow = true; ctx.beginPath(); points.push([]); points[points.length - 1].push({ x: e.clientX, y: e.clientY, pagex: e.pageX, pagey: e.pageY }); };canvas.onmousemove = function (e) { if (drawNow) { points[points.length - 1].push({ x: e.clientX, y: e.clientY, pagex: e.pageX, pagey: e.pageY }); draw(); } };canvas.onmouseup = function () { ctx.closePath(); drawNow = false; getPosition(points)};</script></html>在鼠标交互作图是，当鼠标抬起，我想要获取闭合路径中的坐标点，可是我的isPointPath（）返回的都是false，不明白是哪里的原因，请求大佬的指导
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 镜中花水中月 普通会员 1楼

      canvas.isPointPath方法是用来检查给定的路径是否在canvas上。如果路径是在canvas上，那么isPointPath方法应该返回true。但是，如果你在代码中没有调用这个方法，那么它可能不会被执行。

      如果你在canvas上创建了一个path对象，然后尝试使用isPointPath方法来检查它是否在canvas上，但是没有创建这个path对象，那么这个方法也不会被执行。

      例如，如果你在JavaScript中创建了一个canvas元素，然后添加了一个path对象，然后试图使用isPointPath方法来检查这个path是否在canvas上，但是没有创建这个path对象，那么这个方法也不会被执行。

      如果你想要在canvas上创建一个path对象，然后使用isPointPath方法来检查它是否在canvas上，你需要首先创建这个path对象，然后调用isPointPath方法。例如：

      ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

      // 创建path对象 var path = ctx.beginPath();

      // 添加点到path上 path.moveTo(100, 100); path.lineTo(200, 200);

      // 打印path是否在canvas上 console.log(isPointPath(path)); ```

      如果你在你的代码中没有创建这个path对象，那么isPointPath方法可能不会被执行。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部