脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript+html5 canvas制作色彩斑斓的正方形效果

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javascript 模块依赖管理的本质深入详解

    javascript 模块依赖管理的本质深入详解

    这篇文章主要介绍了javascript 模块依赖管理,结合实例形式深入分析了javascript 模块依赖管理具体定义、实现方法及注意事项,需要的朋友可以参考下
    2020-04-04
  • 详解js实现线段交点的三种算法

    详解js实现线段交点的三种算法

    下面小编就最近学会的一些”求线段交点”的算法说一说, 希望对大家有所帮助。“求线段交点”是一种非常基础的几何计算, 在很多游戏中都会被使用到。有需要的可以参考学习
    2016-08-08
  • Javascript 模式实例 观察者模式

    Javascript 模式实例 观察者模式

    首先我们看看观察者的概念 观察者模式：定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。
    2009-10-10
  • 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)

    7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)

    7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)...
    2007-08-08
  • 前端实现文本溢出展开和收起功能

    前端实现文本溢出展开和收起功能

    在现代网页设计中,文本是网页中最重要的内容之一,然而,当文本超出其容器的大小时,会发生文本溢出的问题,文本溢出不仅会影响网页的视觉效果,还会影响网页的可读性和可用性,所以本文给大家介绍了前端实现文本溢出展开和收起功能的方法,需要的朋友可以参考下
    2025-04-04
  • 简单实现bootstrap导航效果

    简单实现bootstrap导航效果

    这篇文章主要为大家详细介绍了如何简单实现bootstrap导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • ECMAScript6--解构

    ECMAScript6--解构

    解构就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应，并将变量相对应元素进行赋值。本文将详细介绍ECMAScript6--解构的相关知识。下面跟着小编一起来看下吧
    2017-03-03
  • 微信小程序 如何保持登录状态

    微信小程序 如何保持登录状态

    这篇文章主要介绍了微信小程序 如何保持登录状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS实现图片转换成base64的各种应用场景实例分析

    JS实现图片转换成base64的各种应用场景实例分析

    这篇文章主要介绍了JS实现图片转换成base64的各种应用场景,结合实例形式分析了javascript实现图片转换成base64的各种应用场景的相关操作技巧与使用注意事项,需要的朋友可以参考下
    2018-06-06
  • js获取浏览器的各种属性

    js获取浏览器的各种属性

    本篇文章主要介绍了js获取浏览器各种属性的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论