Как создать курсор мыши в HTML 5? - PullRequest
Новая
       1

Как создать курсор мыши в HTML 5?

2 голосов
/ 28 сентября 2011

Если у меня есть сетка 600 на 400, с квадратами 10 на 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);

}

Как бы навести курсор мыши на отдельные квадраты и выделить квадрат, над которым наведена мышь. Например, сделать красное поле с квадратом сетки, на котором находится мышь.

Ответы [ 2 ]

4 голосов
/ 28 сентября 2011

См. Код ниже.Отрегулируйте координаты для события 

<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>

Обновлен код для повышения производительности

2 голосов
/ 23 мая 2014

Просто чтобы добавить ответ к HungryMind, если вы не хотите, чтобы какие-либо поля оставались подсвеченными, когда мышь больше не находится на холсте, добавьте эти две вещи:

1) An 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) A square off() метод: 

this.off = function() {
    this.draw();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...