Html5 холст и JQuery

Question

Я создал треугольник, используя canvas, но мне было интересно, есть ли способ изменить цвет fillStyle при наведении мыши, как если бы это были div и jquery.

var context = document.getElementById("canvasId").getContext("2d");

var width = 150; 

var height = 105; 


context.beginPath();
context.moveTo(75, 0);       
context.lineTo(150, 105); 
context.lineTo(0, 105);       
context.closePath();


context.fillStyle = "#ffc821";
context.fill();

Спасибо за поддержку

Answer 1

Вы можете сделать что-то вроде this .

Что я сделал, так это вставил приведенный выше код в функцию и добавил

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

, который сотрет старый треугольник. Оттуда я положил на него курсор с

$('#canvasId').hover(functionIn,functionOut);

нотации.

Обновление: Кроме того, в качестве примечания вы можете создать треугольник , например, используя CSS . Вот пример с холстом наверху и CSS на дне.

Обновление 2: Вот новый пример кода . @puk прав, мой код касался не hover самого треугольника, а больше об элементе canvas. Но, как вы перечислили в своем примере, вы хотели слоистый эффект с треугольником, чтобы каждый кусочек был другим. Не уверен, хотите ли вы, чтобы каждый фрагмент выделялся по отдельности, но если вы это сделаете, пример кода снова содержит пример <div> и <canvas>. Поскольку «элемент» в пределах холста не известен браузеру, вам необходимо его отслеживать. Пример <div>, скорее всего, будет быстрее в целом, и он позволяет браузеру обрабатывать многие беспорядочные детали, но имеет более сложный CSS, и hover работает немного неожиданно по краям (есть области, которые не являются треугольниками, которые вызывают зависание) , Пример <canvas> является гораздо более сложным JS-кодом и может быть немного медленнее, но имеет, вероятно, точное ожидаемое поведение.

Answer 2

Я не думаю, что canvas предоставляет внутреннюю функциональность мыши для своих форм. У вас есть два варианта

1. Вы можете сделать то, что сделал скиннер с помощью easeljs . Вы можете нарисовать фигуру на временном холсте, а затем использовать context.getImageData(left, top, width, height), чтобы проверить, прозрачен ли пиксель под мышью или нет. Преимущество заключается в том, что он работает универсально, без необходимости знать ограничивающую рамку формы. Недостатком является то, что это очень медленно.

2. Сделайте то, что я сделал, используйте сложные алгоритмы, чтобы определить, находится ли точка внутри или снаружи фигуры. Я постараюсь создать для вас пример jsfiddle.

Вот пример jsfiddle http://jsfiddle.net/pukster/HNA2z/1/ Он показывает, как вы можете использовать простой простой javascript для перехвата событий мыши и создания эффектов прокрутки для прямоугольников, окружностей и сложных полигонов. Установите k=0 для прямоугольника, k=1 для круга и k=2 для многоугольника (предупреждение, код очень грязный).

Box :

function Box(x,y,w,h){
        this.x=x;
        this.y=y;
        this.w=w;
        this.h=h;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.fillRect(this.x,this.y,this.w,this.h);
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
                return (this.x<=x) && (x<=this.x+this.w) && (this.y<=y) && (y<=this.y+this.h);
        }
}

круг

function Circle(x,y,r){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI*2, true); 
                ctx.closePath();
                ctx.fill();
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
                return Math.sqrt((this.x-x)*(this.x-x)+(this.y-y)*(this.y-y))<this.r;
        }
}

Polygon

function Polygon(points){
        this.points = points;
        this.color=cOut;
        this.inside = false;

        this.draw=function(){
                ctx.fillStyle=this.color;
                ctx.beginPath();
                var x,y;
                x = this.points[0][0]; 
                y = this.points[0][1]; 
                ctx.moveTo(x, y);
                for (var i = 1; i < this.points.length; i++){
                   x = this.points[i][0]; 
                   y = this.points[i][1]; 
                   ctx.lineTo(x, y);
                }
                ctx.closePath();
                ctx.fill();
        }

        this.onMouseOver=function(){
                this.color=cOver;
                this.draw();
        }
        this.onMouseOut=function(){
                this.color=cOut;
                this.draw();
        }
        this.isInside = function(x,y){
            for (var c = false, i = - 1, l = this.points.length, j = l - 1; ++i < l; j = i)((this.points[i][1] <= y && y < this.points[j][1]) || (this.points[j][1] <= y && y < this.points[i][1])) && (x < (this.points[j][0] - this.points[i][0]) * (y - this.points[i][1]) / (this.points[j][1] - this.points[i][1]) + this.points[i][0]) && (c = ! c);
            return c;
        }
}

Захват мыши немного технический, но вот как я проверяю переходы:

Переходы

function onMouseMove(e){
        var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        if (shape.isInside(x,y) && ! shape.inside){
                shape.inside = true;
                shape.onMouseOver();
        }
        else if (!shape.isInside(x, y) && shape.inside){
                shape.onMouseOut();
                shape.inside = false;
        }

}