本文实例讲述了html5 canvas画布中删除一个块区域的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
附:图中，黑色小方块即为删除掉的块区域
具体代码如下：
index.html：
canvas中删除一块区域
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程序设计有所帮助。