JavaScript html5 canvas画布中删除一个块区域的方法
更新时间：2016年01月26日 14:40:41 作者：m1870164
这篇文章主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js实现弹窗猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
回调函数是从一个叫函数式编程的编程范式中衍生出来的概念,简单来说,函数式编程就是使用函数作为变量,这篇文章主要介绍了一文彻底理解JS回调函数,需要的朋友可以参考下2022-12-12
第一种是常规的方法:建一个新的数组存放结果,for循环中每次从原数组中取出一个元素，用indexOf查找新数组中是否有该元素，至于第二种详细的看下本文哦2013-03-03
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[...2006-12-12
本文主要介绍了js实现产品缩略图效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了js实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
在做 《JS在线打字练习》时，发现JS在不同浏览器上的字符处理是不一样的。2010-12-12
利用js进行加解密是我们经常会遇到的一个功能，本文给大家介绍的是我目前见到的最全的个人js加解密功能页面，分享出来供大家参考学习，需要的朋友们随着小编来一起学习学习吧2007-12-12
niapp起源 uni-app是一个使用Vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于Uniapp微信小程序实现全局事件监听并进行数据埋点的相关资料,需要的朋友可以参考下2022-11-11
最新评论