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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
javascript常用方法总结
May 14 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
Element Notification通知的实现示例
Jul 27 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
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
发现的以前不知道的函数
2006/09/19 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python实现报表自动化详解
2017/11/16 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
详解python tcp编程
2020/08/24 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
企划主管岗位职责
2013/12/12 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
2014学年自我鉴定
2014/02/23 职场文书
平安建设汇报材料
2014/12/29 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
Python开发五子棋小游戏
2022/04/28 Python