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 用cloneNode方法克隆节点的代码
Oct 15 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
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
浅谈PHP中的那些魔术常量
2020/12/02 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
详解python中asyncio模块
2018/03/03 Python
python实现抖音点赞功能
2019/04/07 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
大学生村官典型材料
2014/01/12 职场文书
酒店端午节活动方案
2014/08/26 职场文书
村委会贫困证明范本
2014/09/17 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
早上好问候语大全
2015/11/10 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Nginx进程调度问题详解
2021/09/25 Servers