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 相关文章推荐
JS cookie中文乱码解决方法
Jan 28 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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和MySql来与ODBC数据连接
2006/10/09 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php调整服务器时间的方法
2015/04/03 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python列表去重的二种方法
2014/02/14 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python中logging包的使用总结
2018/02/28 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
windows支持哪个版本的python
2020/07/03 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
Python中pass语句的作用是什么
2016/06/01 面试题
中学生校园广播稿
2014/01/16 职场文书
大家检讨书5000字
2014/02/03 职场文书
网络宣传方案
2014/03/15 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android