php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
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的基本使用教程
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！