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中常用的55个经典技巧
Aug 12 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
javascript 回调函数详解
Nov 11 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 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实现根据密码长度显示安全条
2017/07/04 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python中的多重继承实例讲解
2014/09/28 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
编写python代码实现简单抽奖器
2020/10/20 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
2014财务年终工作总结
2014/12/08 职场文书
三峡导游词
2015/01/31 职场文书
2016年会开场白台词
2015/06/01 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python
SQL Server中的游标介绍
2022/05/20 SQL Server
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS