如何在canvas中实现鼠标事件

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

雪V歌
2016-07-22 · 知道合伙人数码行家

雪V歌
知道合伙人数码行家

采纳数：78698 获赞数：222939

泉州兴瑞发公司2015-2017最佳优秀员工。

向TA提问私信TA

关注

展开全部

canvas不支持内部对象处理事件，要么使用别人编写好的框架，要么自己写事件处理。。
我这个是自己写的处理事件...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head>
 
<body>
<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持canvas，狗日的IE。</canvas>
<div id="log"></div>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');
if(ctx){
    var objs = [];
    var CCircle = function(){
        this.type = 'circle';
        this.x = 0;
        this.y = 0;
        this.radius = 0;
        this.isHover = false;
        this.color = '#000';
    };
    var Draw = function(){
        ctx.clearRect(0,0,cvs.width,cvs.height);
        for(var i=0;i<objs.length;i++){
            if(objs[i].type='circle'){
                ctx.beginPath();
                ctx.strokeStyle = objs[i].color;
                ctx.arc(objs[i].x,objs[i].y,objs[i].radius,0,Math.PI*2,false);
                ctx.stroke();
                ctx.closePath();
            }
        }
    }
     
    for(var i=0;i<100;i++){
        var c = new CCircle();
        c.x = (Math.random()*300)|0;
        c.y = (Math.random()*300)|0;
        c.radius = 10;
        c.hover = function(){
            this.color = "#f00";
        }
        c.out = function(){
            this.color = "#000";
        }
        objs.push(c);
    }
    Draw();
    cvs.onmousemove = function(e){
        var curr = null;
        for(var i=objs.length-1;i>-1;i--){
            var c = objs[i];
            document.getElementById("log").innerHTML=(e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y) + ' ' +c.radius*c.radius;
            if((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius){
                if((!c.isHover) && c.hover){
                    for(var j=objs.length-1;j>-1;j--){
                        if(i!=j && objs[j].isHover){
                            objs[j].isHover = false;
                            objs[j].out && objs[j].out();
                        }
                    }
                    c.hover();
                    c.isHover = true;
                    Draw();   
                }
                return;
            }
        }
    }
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html,body{ margin:0; padding:0;}
</style>
</head>
 
<body>
<canvas id="cvs" width="300" height="300" style="border:1px solid #333;">你的浏览器不支持canvas，狗日的IE。</canvas>
<div id="log"></div>
<script>
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');
if(ctx){
    var objs = [];
    var CCircle = function(){
        this.type = 'circle';
        this.x = 0;
        this.y = 0;
        this.radius = 0;
        this.isHover = false;
        this.color = '#000';
    };
    var Draw = function(){
        ctx.clearRect(0,0,cvs.width,cvs.height);
        for(var i=0;i<objs.length;i++){
            if(objs[i].type='circle'){
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.strokeStyle = objs[i].color;
                ctx.arc(objs[i].x,objs[i].y,objs[i].radius,0,Math.PI*2,false);
                ctx.stroke();
                ctx.closePath();
            }
        }
    }// end function
     
    for(var i=0;i<100;i++){
        var c = new CCircle();
        c.x = (Math.random()*300)|0;
        c.y = (Math.random()*300)|0;
        c.radius = 10;
        c.hover = function(){
            this.color = "#f00";
            Draw();   
        }
        c.out = function(){
            this.color = "#000";
            Draw();   
        }
        objs.push(c);
    }// end for
    Draw();
    cvs.onmousemove = function(e){
        var hasHover = false;
        for(var i=objs.length-1;i>-1;i--){
            var c = objs[i];
            if(((e.clientX-c.x)*(e.clientX-c.x)+(e.clientY-c.y)*(e.clientY-c.y)<=c.radius*c.radius) && (!hasHover)){
                c.isHover = true;
                hasHover = true;
                c.hover && c.hover();
            }else{
                if(c.isHover){
                    c.isHover = false;
                    c.out && c.out();
                }
            }//end if
        }// end for
    }// end function
}
</script>
</body>
</html>