Html5画布和jQuery

Question

我已经使用画布创建了一个三角形，但我想知道是否有办法将鼠标悬停时的 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);

符号。

更新：另外，作为旁注，您可以创建一个三角形like this using CSS。这是一个example，顶部是画布，底部是 CSS。

更新 2： Here is new sample code。 @puk 是对的，我的代码并不关心三角形本身的hover，而是更关心画布元素。但正如您在示例中列出的那样，您想要一个带有三角形的分层效果，以便每一块都不同。不确定是否要单独突出显示每个部分，但如果这样做，示例代码将再次包含 <div> 和 <canvas> 示例。由于浏览器不知道画布中的“元素”，因此您需要跟踪它。 <div> 示例总体上可能会更快，并让浏览器处理许多杂乱的细节，但有更复杂的 CSS 并且悬停在边缘上有点意外（有些区域不是三角形会触发悬停） . <canvas> 示例是更复杂的 JS 代码，可能会慢一些，但可能具有确切的预期行为。

Answer 2

我不认为画布为其形状提供内部鼠标功能。你有两个选择

1. 你可以做格兰特斯金纳用easeljs做的事情。您可以在临时画布上绘制一个形状，然后使用context.getImageData(left, top, width, height) 测试鼠标下的像素是否透明。好处是它可以通用而不需要知道形状的边界框。缺点是速度极慢。

2. 像我一样，使用复杂的算法来确定一个点是在形状的内部还是外部。我会尝试为您设置一个 jsfiddle 示例。

这是一个 jsfiddle 示例 http://jsfiddle.net/pukster/HNA2z/1/ 它展示了如何使用纯 JavaScript 来捕获鼠标事件，并为矩形、圆形和复杂多边形做翻转效果。为矩形设置k=0，为圆形设置k=1，为多边形设置k=2（警告，代码非常混乱）。

盒子：

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

多边形：

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

}