<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.save();
ctx.beginPath();
ctx.border=" 1px solid #aaa";
ctx.shadowBlur=5;
ctx.fillStyle="#F0FFF0";
ctx.shadowColor="green";
ctx.fillRect(20,20,1000,600);//填充的矩形\\
ctx.fillStyle="green";
var img=new Image();//背景图
img.src="2.jpg";
img.onload=function(){
ctx.drawImage(img,70,70,900,500);
}
window.onload=function(){
btn=new Button();
ctx.save();
ctx.beginPath();
ctx.fillRect(150,570,60,40);
ctx.font="25px Arial";
ctx.fillStyle="#000000 "//字体颜色
ctx.fillText("显示",155,600);//要填充的字及位置
ctx.fillStyle="yellow";
ctx.closePath();
ctx.restore();
btn1=new Button();
ctx.save();
ctx.beginPath();
ctx.fillRect(750,570,60,40);
ctx.font="25px Arial";
ctx.fillStyle="#000000 "//字体颜色
ctx.fillText("隐藏",755,600);//要填充的字及位置
ctx.closePath();
ctx.restore();
c.onclick=function(e){
e=e||event;
var x=e.offsetX;
var y=e.offsetY;
if(x>=750&&x<=810&&y>=570&&y<=600){
alert("nihao");
btn1.on("click",hide);
}
else if(x>=150&&x<=210&&y>=570&&y<=600){
alert("你好");
btn.on("click",show);
}
}
}
function Button(){
Button.prototype.on=function(events,fn){
btn.addEventListener(events,fn);
}
}
//隐藏
var hide=function(){
ctx.clearRect(70,70,900,500);
ctx.save();
ctx.beginPath();
ctx.fillStyle="#F0FFF0";
ctx.fillRect(70,70,900,500);
ctx.closePath();
ctx.restore();
}
//显示
var show=function(){
ctx.drawImage(img,70,70,900,500);
}
</script>
</body>
</html>相关分类