<!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. Ubuntu 配置AP总结

    1.这个是使用别人写的一个GUI来配置,:http://hi.baidu.com/lexiangtaotao/item/5d4e87f22db132c70cd1c86f 2.使用hostapd配置:h ...

  2. Win10系统下编译GDAL1.9.2版本

    环境说明: 1.Win10企业版.64位: 2.VS2012旗舰版: 3.GDAL1.9.2 GADL编译 1.解压GDAL压缩包至F:\GDAL\gdal-1.9.2: 2.设置GDAL编译后安装目 ...

  3. Android debug时一直处于waiting for debugger解决办法

    问题:android 调试卡在:Waiting for Debugger - Application XXX is waiting for the debugger to Attach" 解 ...

  4. 互联网金融必须知道：O2O、P2P、MRD、BRD、LBS、PV、UV、KPI、MRD、VP、UED....

    进入互联网的朋友们和身为互联网业内人士,你们知道有多少专业术吗?有时候专业术语也是一种逼格.商业需求文档,市场需求文档,产品需求文档,功能详细说明文档,华丽丽的各种文档你知道吗?用户体验,用户界面,用 ...

  5. 自定义能够for each的类，C#,Java,C++,C++/cli的实现方法

    自定义类能够被for each,应该算是个老生常谈的话题了,相关的资料都很多,不过这里整理总结主流语言的不同实现方式,并比较部分细节上的差异. 第一种语言,也是实现起来最简单的Java语言.在Java ...

  6. Hekaton是如何影响你数据库的目标恢复时间（RTO）的

    这个周末我发现了SQL Server 2014里Hekaton的一个有趣副作用,很遗憾它会负面影响你数据库的目标恢复时间(Recovery Time Objective,RTO).你已知道,对于每个本 ...

  7. 终极事务处理（XTP，Hekaton）——万能大招？

    在SQL Server 2014里,微软引入了终极事务处理(Extreme Transaction Processing),即大家熟知的Hekaton.我在网上围观了一些文档,写这篇文章,希望可以让大 ...

  8. 阅读Nosql代码有感

    这一年总得来说,读书的时间不多.一是因为时间啥关系,这一年一直在跟着项目走,或者被项目牵着走,几乎所有的时间和精力全部被拴在几个项目上:不过所幸今年创业失败,又回去上班了,时间相对空余了一些. 双十一 ...

  9. 关于SQL SERVER高并发解决方案

    现在大家都比较关心的问题就是在多用户高并发的情况下,如何开发系统,这对我们程序员来说,确实是值得研究,最近找工作面试时也经常被问到,其实我早有去关心和了解这类问题,但一直没有总结一下,导致面试时无法很 ...

  10. XML to Entity

    public static T GetEntityByXml<T>(string xml, string rootNode=null) where T : new() { if (stri ...