如何在HTML 5中創建鼠標懸停突出顯示框？

Question

如果我有一個600 x 400的網格，具有10 x 10像素的正方形，如下所示：

/**
* draws grid to screen
*/
function drawgrid(context)
{
    for(var x = 0.5; x < 600; x += 10)
    {
        context.moveTo(x, 0);
        context.lineTo(x, 400);
    }

    for(var y = 0.5; y < 400; y += 10)
    {
        context.moveTo(0, y);
        context.lineTo(600, y);
    }

    context.strokeStyle = "#eee";
    context.stroke();
}


/**
* Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
*/
function prepareCanvas()
{
        var context = document.getElementById('canvas').getContext("2d");

        drawgrid(context);

}

如何將鼠標懸停在各個正方形上並突出顯示鼠標懸停的正方形。 就像用紅色框突出顯示鼠標懸停的網格正方形一樣。

Answer 1

請參見下面的代碼。 調整事件的坐標

<body>
      <canvas id=canvas height=400 width=600 
         onmousemove="over()" style="cursor:crosshair">
      </canvas>
</body>
<script type="text/javascript">
<!--

    var grid;
    function prepareCanvasGrid()
    {
        var cnv = document.getElementById('canvas');
        grid = new CanvasGrid(cnv.getContext("2d"),cnv.offsetLeft, cnv.offsetTop);
    }

    function CanvasGrid(context,x,y) {
        this.sq = [];
        this.dirty = [];
        this.ctx = context;
        this.x = x;
        this.y = y;
        this.init = function(){
            for(var x = 0.5; x < 600; x += 50) {
                for(var y = 0.5; y < 400; y += 50) {
                    var s = new square(x,y, context);
                    this.sq.push(s);
                }
            }
        }

        this.draw = function(){
            this.ctx.clearRect(0,0,600,400);
            for(var i=0; i < this.sq.length; i++)
                this.sq[i].draw();
         }

        this.clean = function(){
            for(var i=0; i < this.dirty.length; i++)
                this.dirty[i].draw();
            this.dirty = [];
        }

        this.over = function(ex,ey){
            ex = ex - this.x;
            ey = ey - this.y;
            for(var i=0; i < this.sq.length; i++) {
                if(this.sq[i].eleAtPoint(ex,ey)){
                    this.clean(); // clean up
                    this.dirty.push(this.sq[i]);
                    this.sq[i].over();
                    break;
                }
             }
        }

        this.init();
        this.draw();
    }

    function square(x,y, ctx){
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.h = 50;
        this.w = 50;

        this.draw = function(){
            this.ctx.strokeStyle = "#eee";
            this.ctx.strokeRect(this.x, this.y, this.w, this.w);
            this.ctx.fillStyle = "#fff";
            this.ctx.fillRect(this.x, this.y, this.w, this.w);
        }

        this.over = function() {
            this.ctx.fillStyle = "red";
            this.ctx.fillRect(this.x, this.y, this.w, this.w);
        }

        this.eleAtPoint = function(ex,ey){
            if(ex < this.x + this.w && ex > this.x 
                && ey > this.y && ey < this.y + this.h) 
                return true;
            return false;
        }
    }

    function over(){
        var e = window.event;
        grid.over(e.clientX  ,e.clientY);
    }

    prepareCanvasGrid();
     //-->

</script>

更新了代碼以提高性能

Answer 2

只是要添加到hungryMind的答案，如果您不希望當鼠標不再位於畫布上時任何框保持突出顯示，請添加以下兩項：

1） else if

this.over = function(ex,ey){
    ex = ex - this.x;
    ey = ey - this.y;
    for(var i=0; i < this.sq.length; i++) {
        if(this.sq[i].eleAtPoint(ex,ey)){
            this.clean(); // clean up
            this.dirty.push(this.sq[i]);
            this.sq[i].over();
            break;
        } else if (!this.sq[i].eleAtPoint(ex,ey)) {
            this.sq[i].off();
        }
     }
}

2） square off()方法：

this.off = function() {
    this.draw();
}

如何在HTML 5中創建鼠標懸停突出顯示框？

問題描述

2 個解決方案

解決方案1
4 2011-09-28 13:55:05

解決方案2
2 2014-05-22 21:59:59

如何在HTML 5中創建鼠標懸停突出顯示框？

問題描述

2 個解決方案

解決方案1 4 2011-09-28 13:55:05

解決方案2 2 2014-05-22 21:59:59

解決方案1
4 2011-09-28 13:55:05

解決方案2
2 2014-05-22 21:59:59