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

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

运行效果截图如下：

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

具体代码如下：

index.html：

canvas中删除一块区域

#canvas {

background:black; margin-top:100px; margin-left:200px;

}

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);

}

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程序设计有所帮助。相关阅读:

IE中div被视频遮住(用embed来内嵌视频)的解决方法

C#数字图像处理之图像缩放的方法

Win10桌面怎么使用英雄动态壁纸？

在Mac设备上用到全角空格如何切换mac全角半角

SUSE Linux下源码编译方式安装MySQL 5.6过程分享

php判断页面是否是微信打开的示例(微信打开网页)

简单的php文件上传(实例)

phpMyAdmin自动登录和取消自动登录的配置方法

基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法

由浅入深剖析Angular表单验证

浅谈js里面的InttoStr和StrtoInt

CSS3 Columns分列式布局方法简介

HTML5中实现拖放效果无须借助javascript

iOS的UI开发中UITabBarControlle的基本使用教程