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控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
js表单登陆验证示例
Oct 19 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
ES5学习教程之Array对象
Apr 01 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函数
2006/12/06 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
Angular工具方法学习
2016/12/26 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
js禁止表单重复提交
2017/08/29 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
python实现简单的购物程序代码实例
2020/03/03 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python3判断IP地址的方法
2021/03/04 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
最新销售员个人自荐信
2013/09/21 职场文书
韩国商务邀请函
2014/01/14 职场文书
精彩自我鉴定
2014/01/16 职场文书
生物制药专业求职信
2014/03/11 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
毕业生评语大全
2015/01/04 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Redis Stream类型的使用详解
2021/11/11 Redis
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python