JavaScript+html5 canvas制作色彩斑斓的正方形效果

更新时间：2016年01月27日 08:52:44 作者：m1870164

这篇文章主要介绍了JavaScript+html5 canvas制作色彩斑斓的正方形效果,实例分析了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;
  }
})();

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

原生JS实现旋转轮播图+文字内容切换效果【附源码】
这篇文章主要介绍了原生JS实现旋转轮播图+文字内容切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
js通过canvas生成图片缩略图
对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了
2020-10-10
js实现文本框输入文字个数限制代码
这篇文章主要介绍了js实现文本框输入文字个数限制代码，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，如何限制，请看本文
2015-12-12
浅析tr的隐藏和显示问题
本篇文章主要是对tr的隐藏和显示问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
js实现电子时钟效果
这篇文章主要为大家详细介绍了js实现电子时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
javascript下with 的简化代码写法
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用
2008-02-02
用javascript实现div可编辑的常见方法
用javascript实现div可编辑的常见方法...
2007-10-10
详解ES6 扩展运算符的使用与注意事项
扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法，给我们操作数组和对象带来了非常大的便利，我在很多文章中也提到了这个语法。但是其实扩展运算符的用法还是比较多比较杂的，我用一篇文章来做一下总结，梳理一下扩展运算的语法和使用细节。
2020-11-11
Javascript在IE和Firefox浏览器常见兼容性问题总结
这篇文章主要介绍了Javascript在IE和Firefox浏览器常见兼容性问题,结合实例形式总结分析了javascript在IE与Firefox浏览器中常见的各种兼容性问题与相应的解决方法,需要的朋友可以参考下
2016-08-08
javascript中内置对象Math的介绍及用法案例
Math对象是一个内置对象,具有数学常数和函数的属性和方法,不是一个函数对象,下面这篇文章主要给大家介绍了关于javascript中内置对象Math的介绍及用法案例的相关资料,需要的朋友可以参考下
2022-03-03