JavaScript html5画布画布中删除一个块区域的方法

本文实例讲述了html5画布画布中删除一个块区域的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

附：图中，黑色小方块即为删除掉的块区域

具体代码如下：

index.html:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=UTF-8' /标题画布中删除一块区域/title style type=' text/CSS ' # canvas { background : black；页边距-顶部：100像素；左边距left :200 px }/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript ' src=' http : canvas。js '/script脚本类型=' text/JavaScript '缓存={ }；var offsetX=50，offsetY=20cache。context=dyl。创建上下文(“画布”)；dyl.rect(dyl.createColor()，150，150，200，200，0.5)；for(var I=0；i10i ) { dyl.clearRect(150 i*20，150 i*20，20，20)；} /script/htmlcanvas.js:

(function(){ var dyl={ cache : } }；dyl.setContext=函数(上下文){ dyl。缓存。_ context=上下文；返回上下文；};戴尔。getdom=function(id){返回文档。getelementbyid(id)；};戴尔. GetContext=function(){ return dyl。缓存。_上下文；};戴尔。save=function(){ var context=dyl ._ GetContext()；语境？语境。save(): void(0)；};戴尔。restore=function(){ var context=dyl ._ GetContext()；语境？语境。restore(): void(0)；};戴尔。create context=function(canvasID){ var canvas=this。getdom(canvasID)；if(！canvas){ return null；}返回戴尔。setcontext(画布。get context(' 2d ')；};戴尔。create COlOr=function(){ var COlOr=' RGB '；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color=')'；返回颜色；};dyl.addImg=function(img，x，y) { var context=dyl ._ GetContext()；if(！img ||！上下文){ return } if(img==' string '的类型){ var oImg=new Image()；oImg.src=imgoImg。onload=function(){ context。绘制图像(oImg，x，y)；}返回；} context.drawImage(img，x，y)；};dyl.rect=函数（颜色、x、y、宽度、高度){ var context=dyl ._ GetContext()；if(！上下文){ return}上下文。save()；context . FillStyle=color context . global Alpha=alpha？alpha : 1；context.fillRect(x，y，宽度，高度);语境。restore()；};dyl.circle=函数(颜色，x，y，r，alpha) { var context=dyl ._ GetContext()；语境。save()；context.fillStyle=colorcontext。begin path()；context.globalAlpha=alpha？alpha : 1；context.arc(x，y，r，0，2 *数学. PI)；语境。fill()；语境。笔画()；};dyl.clearRect=函数(x，y，宽度，高度){ var context=dyl ._ GetContext()；if(！上下文){ return} context.clearRect(x，y，宽度，高度);};dyl.scale=function(x，y) { var context=dyl ._ GetContext()；if(！上下文){退货} x=x？x : 1；y=y？y : 1；context.scale(x，y)；};if(！窗户。dyl){ window。dyl=dyl}})();希望本文所述对大家Java脚本语言程序设计有所帮助。