<html><head> <title> </title><style></style></head><body> <canvas id='canvas'width="1100" height="630"> <div> </div> </canvas><script>var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.border=" 1px solid #aaa";ctx.shadowBlur=20;ctx.fillStyle="#F0FFF0";ctx.shadowColor="green";ctx.fillRect(20,20,1000,600);ctx.fillStyle="yellow";function Button1(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.save(); ctx.beginPath(); ctx.fillRect(750,560,60,40); ctx.font="25px Arial"; ctx.fillStyle="#000000 "//字体颜色 ctx.fillText("隐藏",755,590);//要填充的字及位置 ctx.closePath();}function Button(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.save(); ctx.beginPath(); ctx.fillRect(150,560,60,40); ctx.font="25px Arial"; ctx.fillStyle="#000000 "//字体颜色 ctx.fillText("显示",155,590);//要填充的字及位置 ctx.fillStyle="yellow"; ctx.closePath();}window.onload=function(){ btn=new Button(); btn.on("click",show); var show=function(){ alert("显示"); } btn1=new Button1(); btn1.on("click",hide); var hide=function(){ alert("yincang"); }}Button.prototype.on=function(events,fn){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); c.onclick=function(e){ e=e||event; var x=e.offsetX; var y=e.offsetY; if(x>=150&&x<=210&&y>=560&&y<=600){ //btn.addEventListener(events,fn); alert("你hao"); } } }Button1.prototype.on=function(events,fn){ var q=document.getElementById("canvas"); var ctx=q.getContext("2d"); q.onclick=function(e){ e=e||event; var x=e.offsetX; var y=e.offsetY; if(x>=750&&x<=810&&y>=560&&y<=600){ //btn.addEventListener(events,fn); alert("你好"); } } }</script></body></html>
1 回答
已采纳
ruibin
TA贡献358条经验 获得超213个赞
你可以把c.onclick=function(e){ 改成c.addEventListener('click', function() { 然后就可以了。因为onclick只支持一个，addEventListener可以支持多个。
添加回答
举报
0/150
提交
取消