<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,canvas {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #000;

 }

 #can {

     background: #FFF /* url('./images/index.jpg') no-repeat center; backgrond-size: cover */;

     display: block; margin: 25px auto; border-radius: 2px; cursor: pointer;

 }

 </style>

 <script type='text/javascript'>

     $( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         var oImg = new Image();

         oImg.src = './images/index.jpg';

         var gImg = oCan.getImageData( 50 , 30 , 100 , 150 );    /* 之所以进行获取,是为了循环中读取个数 */

         oImg.onload = function(){

             var num = 0;

             var length = gImg.data.length;

             var img = oCan.createImageData( 100 , 100 );

             for( var i = 0 ; i < length ; i++ ){

                 num = i % 4; /* 0 1 2 3 */

                 switch( num ){

                     case 0 :

                         num = 0;

                         img.data[ i ] = getRandomNum();

                     break;

                     case 1 :

                         num = 255;

                         img.data[ i ] = getRandomNum();

                     break;

                     case 2 :

                         num = 0;

                         img.data[ i ] = getRandomNum();

                     break;

                     case 3 :

                         num = getRandomNum();

                         img.data[ i ] = num;

                     break;

                 }

             }

             oCan.putImageData( img , 10 , 20 );

         };

         function getRandomNum(){

             return Math.ceil( Math.random() * 255 ); /* 0-- 255 */

         }

         //alert(getRandomNum());

     } );

 </script>

 </head>

 <body>

     <canvas id='can' width='300' height='168'>检测到您的浏览器版本过低请升级您的浏览器版本以获取更好的用户体验...</canvas>

 </body>

 </html>

[ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果的更多相关文章

  1. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  2. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  3. WEB烟花效果——Canvas实现

    摘要        本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...

  4. canvas总结：元素大小与绘图表面大小

    前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: <canvas id="myCanvas" width="300&q ...

  5. canvas API ，通俗的canvas基础知识（五）

    前几期讲的都是路径图形的绘图,这节我们要讲的是如何在画布上操作图片,因为图形画不了漂亮妹子(画图高手忽略不计),想画美女怎么办?跟我来: 想要在画布中插入一张图片,我们需要的方法是这位大侠: draw ...

  6. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  7. Android应用程序窗口（Activity）的绘图表面（Surface）的创建过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8303098 在前文中,我们分析了应用程序窗口连 ...

  8. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

  9. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  10. Canvas学习系列二：Canvas的坐标系统

    上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...

随机推荐

  1. DMSFrame 之简单用法（二）

    上次说了下DMSFrame的一些查询方式,之前也有好多朋友问了下这个ORM与EF有什么样的区别. 要论区别,我自己也总结了几点.如果有其它朋友知道的,可以回复补充下. 1.不需要编辑的时候需要再次查询 ...

  2. PIN码计算锦集

    1. 腾达,C8:3A:35开头的MAC有效~network路由,MAC有效~以及00B00C开头的MAC有效之外的请您自己发现算法..这里只公布三个MAC地址算法,其余也可以算~这里就不公布出来了. ...

  3. iOS app开发资料整理

    Objective C快速入门: http://blog.csdn.net/totogo2010/article/details/7632384 http://www.cocoachina.com/i ...

  4. IMongoQuery的内部实现Query的用法

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  5. Communication - 03.RILC

    RIL层的作用大体上就是将上层的命令转换成相应的AT指令,控制modem工作.生产modem的厂家有很多:Qualcomm, STE, Infineon... 不同的厂家都有各自的特点,当然也会有各自 ...

  6. Mysql学习笔记（十）存储过程与函数 + 知识点补充（having与where的区别）

    学习内容:存储程序与函数...这一章学的我是云里雾里的... 1.存储过程...   Mysql存储过程是从mysql 5.0开始增加的一个新功能.存储过程的优点其实有很多,不过我觉得存储过程最重要的 ...

  7. 性能测试类，让你写法代码养成经常测试的好习惯 -ASP.NET C#

    介绍: 可以很方便的在代码里循环执行 需要测试的函数  自动统计出执行时间,支持多线程. 使用方法: PerformanceTest p = new PerformanceTest(); p.SetC ...

  8. JS魔法堂：属性、特性，傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  9. 五、Request

    1.      Request 由于python函数所有变量都没有显示类型声明,特别是函数的输入参数,输出参数,因此在阅读代码时会造成比较大的困扰,比如大部分处理函数都有request输入参数,不同模 ...

  10. [Solution] ASP.NET Identity(2) 空的项目使用

    在本节中,我将说明将ASP.NET Identity添加到现有的项目或者一个空项目.我将介绍你需要添加的Nuget和Class.此示例中,会使用LocalDB. 本节目录: 注册用户 登入登出 注册用 ...