<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>get/putImageData</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var cxt = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        // 从10,10坐标开始绘制整个图片

        cxt.drawImage(img, 10, 10);

        // 获取从50,50到200,200的区域

        var imgData = cxt.getImageData(50,50,200,200);

        // 将获得的整个像素绘制到10,260开始的Canvas上面

        cxt.putImageData(imgData,10,260);

        // 将取得的一部分像素(从50,50开始宽高为100,100)，

        // 绘制到200,260开始的Canvas上面

        cxt.putImageData(imgData,200,260,50,50,100,100);

    };

    </script>

</body>

</html>

Canvas get/putImageData的更多相关文章

  1. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  3. 使用Canvas把照片转换成素描画

    原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...

  4. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  5. HTML5(五)——Canvas API

    什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...

  6. 深入浅出ES6（十七）：展望未来

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...

  7. [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. 深入理解viewport（转）

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  2. svn代码管理的使用工作流程

    1. 新建代码库repository. 2. checkout 到workspace. 3. checkin 回 repository. 4. release 一个版本出来(相当于拉出一个branch ...

  3. BNU OJ 51005 BQG's Quadrilateral Bricks

    #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...

  4. 关于BOM 的详细介绍

    原文地址:http://blog.csdn.net/u011526599/article/details/51419182

  5. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  6. windows下egret环境搭建

    作者:zccst 2,下载安装WebStorm(经了解是西欧捷克开发的,欧洲人对审美不够,所以界面不太好看,但是功能很强大) (1)遇到的问题是注册码问题,不过也很容易在网上找到. (2)如何打开已创 ...

  7. iReport使用教程

    http://www.blogjava.net/keweibo/articles/239492.html 原创出处 http://blog.163.com/liushuo216@126/blog/st ...

  8. hql语句拼接的替换方式

    hql语句拼接的替换方式 hql语句拼接 String hql = "FROM Topic t WHERE t.forum=? "; List<Object> para ...

  9. CodeForces 626B Cards

    瞎搞题...凭直觉+猜测写了一发,居然AC了.. #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  10. new sun.misc.BASE64Encoder()报错找不到jar包

    解决方案1(推荐): 只需要在project build path中先移除JRE System Library,再添加库JRE System Library,重新编译后就一切正常了. 解决方案2: W ...