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

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

附:图中，黑色小方块即为删除掉的块区域
具体代码如下：
index.html：

<！DOCTYPE html><html> <head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>canvas中删除一块区域</title><style type="text/css"> #canvas {background:black; margin-top:100px; margin-left:200px; }</style> </head> <body><canvas id="canvas" width="500px" height="500px" ></canvas> </body> <script type="text/javascript" src="canvas.js"></script> <script type="text/javascript">cache = {};var offsetX = 50, offsetY = 20;cache.context = dyl.createContext（"canvas"）;dyl.rect（dyl.createColor（）, 150, 150, 200, 200, 0.5）;for（var i=0; i<10; i++） { dyl.clearRect（150 + i*20, 150 + i*20, 20, 20）;} </script></html>

canvas.js：

（function（） {var dyl = {cache: {}};dyl.setContext = function（context） {dyl.cache._context = context;return context;};dyl.getDom = function（id） {return document.getElementById（id）;};dyl._getContext = function（） {return dyl.cache._context;};dyl.save = function（） {var context = dyl._getContext（）;context ? context.save（） : void（0）;};dyl.restore = function（） {var context = dyl._getContext（）;context ? context.restore（） : void（0）;};dyl.createContext = function（canvasID） {var canvas = this.getDom（canvasID）;if（！canvas） {return null;}return dyl.setContext（canvas.getContext（"2d"））;};dyl.createColor = function（） {var color = "rgb（";color += Math.round（Math.random（）*255）;color += ",";color += Math.round（Math.random（）*255）;color += ",";color += Math.round（Math.random（）*255）;color += "）";return color;};dyl.addImg = function（img, x, y） {var context = dyl._getContext（）;if（！img || ！context） {return;}if（typeof img === "string"） {var oImg = new Image（）;oImg.src = img;oImg.onload = function（） {context.drawImage（oImg, x, y）;}return;} context.drawImage（img, x, y）;};dyl.rect = function（color, x, y, width, height, alpha） {var context = dyl._getContext（）;if（！context） {return;}context.save（）;context.fillStyle = color;context.globalAlpha = alpha ? alpha : 1;context.fillRect（x, y, width, height）;context.restore（）;};dyl.circle = function（color, x, y, r, alpha） {var context = dyl._getContext（）;context.save（）;context.fillStyle = color;context.beginPath（）;context.globalAlpha = alpha ? alpha : 1;context.arc（x, y, r, 0, 2*Math.PI）;context.fill（）;context.stroke（）;};dyl.clearRect = function（x, y, width, height） {var context = dyl._getContext（）;if（！context） {return;}context.clearRect（x, y, width, height）;};dyl.scale = function（x, y） {var context = dyl._getContext（）;if（！context） {return;}x = x ? x : 1;y = y ? y : 1;context.scale（x, y）;};if（！window.dyl） {window.dyl = dyl;}}）（）;

希望本文所述对大家JavaScript程序设计有所帮助。