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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
js实现上传图片到服务器
Apr 11 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python连接池实现示例程序
2013/11/26 Python
详解Django中的过滤器
2015/07/16 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
django有哪些好处和优点
2020/09/01 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
挂职思想汇报
2013/12/31 职场文书
大学毕业生推荐信
2014/07/09 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2015元旦节寄语
2014/12/08 职场文书
校运会新闻稿
2015/07/17 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL