JavaScript+html5 canvas制作色彩斑斓的正方形效果


Posted in Javascript onJanuary 27, 2016

本文实例讲述了JavaScript+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');
  for(var i=0; i<10; i++) {
   for(var j=0; j<10; j++) {
    var alpha = j * 0.1 + 0.1;
    (function(i, j ,alpha) {
     setTimeout(function() {
      dyl.rect(dyl.createColor(), i*50, j*50, 100, 100, alpha);
     }, 100*j*i);
    })(i, j ,alpha);
   }
  }
 </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实现QueryString获取GET参数的方法
Jul 02 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
layui表格实现代码
May 20 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 #Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 #Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
You might like
德生PL990的分析评价
2021/03/02 无线电
isset和empty的区别
2007/01/15 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
javascript中this指向详解
2016/04/23 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
详解Python绘图Turtle库
2019/10/12 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python collections模块的使用
2020/10/16 Python
年终自我鉴定
2013/10/09 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Java 超详细讲解hashCode方法
2022/04/07 Java/Android