<!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. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  2. ps裁剪圆角

    1.打开要编辑的图片 2.选择圆角矩形工具,并调整半径(半径越大,角越圆),本例半径为20像素 3.使用上述工具画出选区 4.按下ctrl+enter,可以看到选区边缘描上了虚线 5.菜单栏-图像-剪 ...

  3. linux下的daemon进程

    转自:http://www.cnblogs.com/xuxm2007/archive/2011/07/29/2121280.html   #include <unistd.h> int d ...

  4. [iOS]关于状态栏(UIStatusBar)的若干问题

    版本: OS X 10.10.5 Xcode 6.4(6E35b) iOS >= 7 一.概述 状态栏(UIStatusBar)指iPhone/iPad/iPod屏幕顶部用于显示网络.时间和电量 ...

  5. C# 理解泛型

    出处:http://www.tracefact.net/CSharp-Programming/Generics-In-CSharp.aspx 术语表 generics:泛型type-safe:类型安全 ...

  6. jquery 按钮效果 正常、移上、按下

    在网页设计过程中,经常遇见按钮的各状态效果.写了一个jquery扩展,使这个过程更方便! 使用前注意引用Jquery: JqueryExtend.js: (function ($) { // Butt ...

  7. spring 配置多个数据源的文件

    <?xml version="1.0" encoding="UTF-8"?><!-- Repository and Service layer ...

  8. Linux文件查找工具之find “大宝剑”--转载

    原文地址:http://xinzong.blog.51cto.com/10018904/1749465 一.文件查找工具常用软件 locate: locate命令其实是find -name的另一种写法 ...

  9. c#关于委托和事件（二）（介绍的很详细）

    using System;using System.Collections.Generic;using System.Text; namespace Delegate {    // 热水器    p ...

  10. 15款提高工作效率的 Web 项目管理工具

    在今天的快节奏的商业世界里,能够通过计划.组织.和管理资源池以及评估开发资源的模式来管理一个项目,是一个很艰巨的任务. 有很多现成的项目管理软件来帮助减轻项目管理的负担,并且他们几乎覆盖了所有类型的业 ...