问答详情
源自:8-5 使用Canvas交互和isPointInPath

关于isPointInPath(x,y)

老师,我调试了这个代码,为什么我的context.isPointInPath(x,y)输出的值总是false,chorme,firefox,ie都是,还有用fillRect()绘制的矩形,判断其内部的点也是返回false,这是为什么啊?

提问者:mikeding 2016-04-13 20:40

个回答

  • 慕粉0565346
    2016-04-28 01:06:22

    看到了。。。。。。。

  • 慕粉0565346
    2016-04-27 23:44:04

    帮忙看看哪里错了

  • 慕粉0565346
    2016-04-27 23:43:13

    <!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>canvas伪类</title>

    </head>

    <body>

    <canvas class="" id="canvas" width=''></canvas>

    <script>

    var balls =[];

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext("2d");

    window.onload = function(){

    canvas.width =800;

    canvas.height =800;

    context.fillStyle ="#085";

    for(var i = 0; i<10;i++){

    var aBall = {

    x:Math.random()*canvas.width,

    x:Math.random()*canvas.height,

    r:Math.random()*50+20};

    balls[i] = aBall;

    }

    draw();

    canvas.addEventListener("mousemove",detect)

    }


    function draw(x,y){

    context.clearRect(0,0,canvas.width,canvas.height);

    for(var i = 0 ;i<balls.length;i++){

    context.beginPath();

    context.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2);

    if( context.isPointInPath(x,y)){

    context.fillStyle="red";

    }else{

    context.fillStyle="#058";


    }

    context.fill();

    }

    }

    function detect(event) {

    var x = event.clientX - canvas.getBoundingClientRect().left;

    var y = event.clientY - canvas.getBoundingClientRect().top;

    draw(x,y);

    }


    </script>


  • 歪嘴的肖恩
    2016-04-16 11:30:06

    no node,no answer.