Question

我想为每个画布应用不同的悬停颜色，任何人都可以告诉我如何编写悬停画布。这是我的代码：

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="350" height="200" style="border:1px solid #c3c3c3;"></canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0,0,150,75);

        var x = c.getContext("2d");
        x.fillStyle = "yellow";
        x.fillRect(175,0,150,75);

        var y = c.getContext("2d");
        y.fillStyle = "green";
        y.fillRect(0,95,150,75);

    </script>
</body>
</html>

Answer 1

如果你需要一个想法，你可以看到下面的代码;它会在Pixel阵列中的点上悬停一个小圆圈。你可以问一下你需要知道的内容..

var pixel = [{x:10,y:10}] //Coordinates array
function handleMouse(e){
            var ctx= tooltip.getContext("2d");
            var hit= 0;
            var xMouse = e.pageX;
            var yMouse = e.pageY;
            //console.log(xMouse, yMouse);
            var curleft = curtop = 0;
            var obj = graph;
            if (obj.offsetParent) {
                do {
                    curleft += obj.offsetLeft;
                    curtop += obj.offsetTop;
                    } while (obj = obj.offsetParent);
            }       
            //console.log(curleft,curtop);

            for (i=0;i<pixel.length;i++){
                var dx = xMouse - curleft - pixel[i].x;
                var dy = yMouse - curtop - pixel[i].y;

                if(dx*dx + dy*dy <=radiiGraphPoint*radiiGraphPoint ){
                    //console.log("on Circle");
                    tooltip.style.display='block';
                    tooltip.style.left=pixel[i].x+ 'px';
                    tooltip.style.top= pixel[i].y-tooltip.height-10 + "px";
                    ctx.fillStyle="#474747";
                    ctx.fillRect(0,0,tooltip.width,tooltip.height);
                    ctx.fillStyle="#fff";
                    ctx.textAlign="center";
                    ctx.textBaseline="middle";
                    ctx.font="italic 600 8.5pt sans-serif";
                    ctx.fillText(pixel[i].X +","+ pixel[i].Y,tooltip.width/2,tooltip.height/2);

                    c.fillStyle="#79EDED";
                    c.beginPath();
                    c.arc(pixel[i].x,pixel[i].y,radiiGraphPoint+2,0, Math.PI * 2,true);
                    c.fill();
                    hit=1;
                } 
            }
            if(hit==0){
                tooltip.style.display='none';
                build_graph();
            }
        }

在javascript中为canvas应用不同的悬停效果

1 个答案: