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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jquery获取radio值实例
Oct 16 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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 curl post 时出现的问题解决
2014/01/30 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Django中使用group_by的方法
2015/05/26 Python
Python编程中的文件操作攻略
2015/10/16 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python实现飞机大战小游戏
2019/11/08 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
英语商务邀请函范文
2014/01/16 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
创业计划书之服装
2019/10/07 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android