<!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';

         oImg.onload = function(){

             oCan.drawImage( this , 0 , 0 , this.width , this.height );

             var img = oCan.getImageData( 50 , 50 , 100 , 100 ); /* 参数 x,y,w,h 在这里面获取的是100*100宽高的颜色值:其中计算方法为100px*100px = 10000px 但是在canvas标签中每一个像素中都有rgba四个颜色值所以当我们在下面打印长度的时候显示的是40000个 */

             //console.log( img.data.length ); /* 选定区域的数据(颜色值)长度 */

             oCan.putImageData(img , can.width / 4, can.height / 4);/* 参数 : obj , x, y 可以实现局部拷贝效果 此函数作用将指定对象获取的数据放置到画布的指定位置上*/

         }

     } );

 </script>

 </head>

 <body>

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

 </body>

 </html>

[ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解的更多相关文章

  1. 如何使用canvas进行2d绘图

    canvas 的 2D context 可以绘制简单的 2D 图形.它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0).所有的坐标值都基于这个原点 ...

  2. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  3. canvas 多种形状绘图方法

    function canvasUploadImg(image,imageName,imgType,callbackfn){ var img_width = image.width; var img_h ...

  4. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  5. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  6. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  7. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  8. canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. [读书笔记]C#学习笔记五: C#3.0自动属性,匿名属性及扩展方法

    前言 这一章算是看这本书最大的收获了, Lambda表达式让人用着屡试不爽, C#3.0可谓颠覆了我们的代码编写风格. 因为Lambda所需篇幅挺大, 所以先总结C#3.0智能编译器给我们带来的诸多好 ...

  10. C#学习笔记四: C#3.0自动属性&匿名属性及扩展方法

    前言 这一章算是看这本书最大的收获了, Lambda表达式让人用着屡试不爽, C#3.0可谓颠覆了我们的代码编写风格. 因为Lambda所需篇幅挺大, 所以先总结C#3.0智能编译器给我们带来的诸多好 ...

随机推荐

  1. IOS8Preview-xCode_6

    IOS8Preview-xCode_6 what's new What's new in xCode 6 Xcode 6 introduces a radically new way to desig ...

  2. DSP中CMD文件

    DSP中CMD文件 (2012-12-26 20:54:17) 转载▼ 标签: 杂谈 分类: DSP FPGA DSP的存储器的地址范围,CMD是主要是根据那个来编的.CMD 它是用来分配rom和ra ...

  3. JAVA & JSON详解

    JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...

  4. HTML5[8]: 图文混排，图片与文字居中对齐

    <img src="image.png"><span>999</span> img { /* ...  */ vertical-align: t ...

  5. RESTful API 设计指南【转】

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...

  6. Linux高级编程--08.线程概述

    线程 有的时候,我们需要在一个基础中同时运行多个控制流程.例如:一个图形界面的下载软件,在处理下载任务的同时,还必须响应界面的对任务的停止,删除等控制操作.这个时候就需要用到线程来实现并发操作. 和信 ...

  7. Google Chrome Frame 自定义渲染方式，调用ActiveX

    通过meta段的设置可以控制浏览器的渲染行为,但在一些特殊情况下,meta段的设置无效,我们需要额外的操作以达到目的. 模式1:页面A(IE)iFrame引用页面B(Chrome Frame) 问题描 ...

  8. EF Attach时已存在的处理方式

    如果我们在先前的步骤中读取过数据,如 var list = db.Model.ToList(); 之后再,附加 var o = new Model { Id = 1 }; db.Model.Attac ...

  9. Tips3:通过Layer下拉菜单来锁定游戏物体和控制物体的可视化

    通过把不同的游戏物体放在不同的Layer里面能对不同类的游戏物体进行很方便的控制,如果某些游戏物体创建后你不想再改动,如地面 装饰 什么的, 你可以通过点击Layer下拉菜单把它们锁定了 也可以通过控 ...

  10. gulp-uglify《JS压缩》----gulp系列（四)

    本节实现JS压缩,在实现压缩前,先配置JS任务,设置源目录和输出目录. 在系列(三)代码的基础上,再进行扩展. 1.找到gulp->config.js,对JS进行源目录(src->img) ...