<!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. viewWithTag获取subview规则详解

    通常我们在view层级里面对subView的操作可以通过两种方式:1.保留一个subview的引用,然后在类中通过该引用对该subview进行操作,但是要注意在适当的位置添加内存维护的代码,退出前手动 ...

  2. JDBC连接SQL Server2008

    在使用JDBC连接数据库之前首先要加载相应数据库的JDBC驱动类,可以通过通用方法Class.forName来加载驱动类.   方式一:使用JDBC-ODBC连接桥 一般安装JDK后会自带JDBC-O ...

  3. windbg加载sos.dll

    SOS.dll 中提供的 Son of Strike 扩展 (SOS),用于调试 WinDbg 中的托管代码.在启动了调试程序并将其附加到托管进程(或加载故障转储) .load C:\Windows\ ...

  4. 用户无法进入SDSF，报NO GROUP ASSIGNMENT错误

    注:命令行小写部分表出需要根据自己的情况改变!! a)激活SDSF资源类 SETROPTS CLASSACT(SDSF) b)查看SDSF资源类的PROFILE RLIST SDSF * c)如果不存 ...

  5. MySQL批量SQL插入性能优化

    对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时间长.特别像报表系统,每天花费在数据导入上的时间可能会长达几个小时或十几个小时之久.因此,优化数据库插入性能是很有意义的. ...

  6. MyBatis知多少（16）MyBatis映射

    之前我们详细地讨论了MyBatis背后的设计理念以及iBATIS框架是如何产生的.也说明了MyBatis是一个混合型解决方案,它从处理关系数据库的其他不同方法那里借鉴了许多思想.那么MyBatis到底 ...

  7. Linux的段错误调试方法

    linux段错误的调试方法 相关博文: http://blog.csdn.net/htianlong/article/details/7439030 http://www.cnblogs.com/pa ...

  8. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  9. SQL Server 诊断查询-(3)

    Query #27 Database Properties    -- Recovery model, log reuse wait description, log file size, log u ...

  10. 用Qt写软件系列一：QCacheViewer(浏览器缓存查看器)

    介绍 Cache技术广泛应用于计算机行业的软硬件领域.该技术既是人们对新技术探讨的结果,也是对当前软硬件计算能力的一种妥协.在浏览器中使用cache技术,可以大幅度提高web页面的响应速度,降低数据传 ...