Html5 Canva中繪製的元素添加滑鼠事件執行個體教程

使用jTopo給Html5 Canva中繪製的元素添加滑鼠事件

使用Html5的時候，在Canvas上繪製的東西是不能相應滑鼠事件的，但是使用jTopo添加事件非常簡單，效果如下：

程式碼範例：

var node = new JTopo.Node("Hello");node.setLocation(409, 269);node.mousedown(function(event){if(event.button == 2){node.text = '按下右鍵';}else if(event.button == 1){node.text = '按下中鍵';}else if(event.button == 0){node.text = '按下左鍵';}});node.mouseup(function(event){if(event.button == 2){node.text = '鬆開右鍵';}else if(event.button == 1){node.text = '鬆開中鍵';}else if(event.button == 0){node.text = '鬆開左鍵';}});node.click(function(event){console.log("單擊");});node.dbclick(function(event){console.log("雙擊");});node.mousedrag(function(event){console.log("拖拽");});node.mouseover(function(event){console.log("mouseover");});node.mousemove(function(event){console.log("mousemove");});node.mouseout(function(event){console.log("mouseout");});

執行個體二

問：用HTML5的canvas畫的一個圖，如何添加滑鼠事件（如：移入，點擊），感謝各位的指點！

回答一：

物件導向就可以

一個是你找找對象化的canvas架構  比如canvasjs

一個是你自己寫對象結構

簡單說你canvas裡面所有畫的元素都是對象 比如那個 圓圈  比如那個線條

每個對象都要 實現 滑鼠事件 mouseon 等等 每個對象要知道自己的座標和大小（矩形大小）

但是怎麼觸發？  在canvas上綁定所有滑鼠事件  然後  檢查座標看那個對象被觸及了 然後調用該對象 相應的滑鼠事件


回答二：

不是給圖形添加滑鼠事件，而是在滑鼠事件中判斷滑鼠下是哪個圖形。如

<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/jqplot/excanvas.min.js"></script><![endif]--><script type="text/javascript">    var list=[];    var currentC;    var _e={};    var cricle = function(x,y,r){        this.x=x;        this.y=y;        this.r=r;        this.isCurrent=false;        this.drawC=function(ctx,x,y){            ctx.save();            ctx.beginPath();            ctx.moveTo(this.x,this.y-this.r);            ctx.arc(this.x,this.y,this.r,2*Math.PI,0,true);            if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) {                                        ctx.fillStyle = '#ff0000';                    currentC=this;                    this.isCurrent=true;            }else{                ctx.fillStyle = '#999999';            }            ctx.fill();        }        }    function draw(){        var canvas = document.getElementById('tutorial');        if (canvas.getContext){            var ctx = canvas.getContext('2d');            for(var i=0;i<10;i++){                var c=new cricle(20*i,20*i,5*i);                c.drawC(ctx);                list.push(c);            }        }    }        function reDraw(e){        e=e||event;        var canvas = document.getElementById('tutorial');        var x = e.clientX - canvas.offsetLeft;        var y = e.clientY - canvas.offsetTop;        canvas.width = canvas.width;        if (canvas.getContext){            var ctx = canvas.getContext('2d');            for(var i=0;i<list.length;i++){                var c=list[i];                c.drawC(ctx,x,y);                            }        }        }        function show(e){        e=e||event;        var canvas = document.getElementById('tutorial');        var ctx = canvas.getContext('2d');        var x = e.clientX - canvas.offsetLeft;        var y = e.clientY - canvas.offsetTop;        if(currentC){            currentC.x=parseInt(x+(x-currentC.x)/5);            currentC.y=parseInt(y+(y-currentC.y)/5);        }        _e=e;    }    window.onload=function(){                var canvas = document.getElementById('tutorial');        draw();                canvas.onmousedown=function(e){            e=e||event;            var x = e.clientX - canvas.offsetLeft;            var y = e.clientY - canvas.offsetTop;            if(currentC)                currentC.isCurrent=false;            currentC=null;            reDraw(e);            _e=e;            var showTimer=setInterval(function(e){                reDraw(e);            },10,_e);            canvas.onmousemove=show;            document.onmouseup=function(){                if(currentC)                    currentC.isCurrent=false;                currentC=null;                canvas.onmousemove=null;                clearInterval(showTimer);            }        }    }</script><style type="text/css">  canvas { border: 1px solid black; }</style></head><body style="background:#eeeeee;">    <canvas id="tutorial" width="1000" height="550" style="z-index:100;display:block;position:absolute;"></canvas></body></html>