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


Posted in Javascript onJanuary 26, 2016

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

运行效果截图如下:

JavaScript 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程序设计有所帮助。

Javascript 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
详解vue中组件参数
Jul 09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 #Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 #Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 #Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 #Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 #Javascript
You might like
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
Yii框架安装简明教程
2020/05/15 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python进度条显示之tqmd模块
2020/08/22 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
股指期货心得体会
2014/09/10 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
刘公岛导游词
2015/02/05 职场文书
公司催款律师函
2015/05/27 职场文书
初一英语教学反思
2016/02/15 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技