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程序设计有所帮助。
-
本文向大家介绍是否可以从区块链的网络中删除一个或多个块？相关面试题，主要包含被问及是否可以从区块链的网络中删除一个或多个块？时的应答技巧和注意事项，需要的朋友参考一下 对的，这是可能的。有时，只需要考虑此在线分类账的特定部分。通过使用默认过滤器和选项，我们可以删除这些块。
-
有没有可能用画布在Android中实现下面的图片？ 我想有一个洞，而不仅仅是在黄色的红色层上有一个圈。我在-method中使用以下代码进行了尝试（但失败了）： 但是当我使用这段代码时，它在两个位图上都开了一个洞。最后，这个应用程序应该是一个带有球、洞和其他东西的迷宫。当球掉进洞里时，它应该出现在红色位图下。有可能实现这一点吗？ 答： 如果有人也有同样的问题：使用View而不是SurfaceView
-
我目前正在制作minecraft forge mod。有人知道如何先在特定坐标上删除一个块，然后在同一个位置放置一个新块吗？就像用新块替换旧块一样。 我将把它放在这段代码的中间： 我tem.dirt只是个测试 因此，如果玩家拿着一个特定的物品（我现在用的是泥土）并右击方块，就会发生一些事情。顺便说一句，我有更多的代码，使代码发生时，球员右键点击块。 我在谷歌上搜索了一下，什么也没找到。
-
我有一个外部配置单元表，其中有诸如year=2017，year=2018之类的分区，在它们内部，我还有year=2017和year=2018的每个月的分区。 如果是内部表，会发生什么情况？
-
现在我想知道如何使用ITextSharp移除那些高亮显示的矩形。 它删除了所有的注释，但我想删除特定的注释。假设我在第1页突出了美国和专利申请出版物，现在我想单独删除美国。我会通过美国的文本。 我引用了这个答案。其中，要获得突出显示的文本，需要获得存储在突出显示注释中的坐标（存储在QuadPoints数组中），并且需要使用这些坐标解析页面内容中位于这些坐标处的文本。
-
本文向大家介绍区块链中的一个区块永远不能有多个父区块吗？相关面试题，主要包含被问及区块链中的一个区块永远不能有多个父区块吗？时的应答技巧和注意事项，需要的朋友参考一下 回答：是的，的确，区块链永远不会有父区块。每个区块在区块链中都是独立的。