<!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 ); /* 选定区域的数据(颜色值)长度 */

         }

     } );

 </script>

 </head>

 <body>

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

 </body>

 </html>

[ html canvas getImageData Object.data.length ] canvas绘图属性 getImageData Object.data.length 属性讲解的更多相关文章

  1. "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法

    一.问题描述: 在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(img,……), chrome 下出错信息为: ...

  2. canvas总结：元素大小与绘图表面大小

    前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: <canvas id="myCanvas" width="300&q ...

  3. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

  4. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  5. Canvas学习系列二：Canvas的坐标系统

    上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...

  6. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  7. [SAP ABAP开发技术总结]数据引用（data references）、对象引用（object references）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 解决gpg failed to sign the data fatal: failed to write commit object解决方案

    今天有位新同事在comit代码的时候一直报这个错误: gpg failed to sign the data fatal: failed to write commit object. 看到网上说gp ...

  9. git问题：gpg failed to sign the data fatal: failed to write commit object问题

    今天用版本控制工具git提交时一直出现的问题:gpg  failed to sign the data fatal: failed to write commit object, gpg是一个加密软件 ...

  10. Core Data系列文章（一）Core Data基础

    在iOS开发数据库SQLite的使用介绍了iOS中使用SQLite对数据进行持久化存储,实际上是对数据库直接进行操作,而苹果专门有一套API来间接的对数据进行持久化存储,而且主要针对用户创建的对象 - ...

随机推荐

  1. 使用Doxygen生成net帮助文档

    一． 什么是Doxygen? Doxygen 是一个程序的文件产生工具,可将程序中的特定批注转换成为说明文件.通常我们在写程序时,或多或少都会写上批注,但是对于其它人而言,要直接探索程序里的批注,与打 ...

  2. Dbvisualizer9.0.6 解决中文乱码

    一.设置编辑器的编码 Tools->Tools Properties ->General->File Encoding 设置为UTF-8 二.如果数据库为UTF-8,则要在连接时做以 ...

  3. 安卓序列化漏洞 —— CVE-2015-3525

    在2014年,Jann Horn发现一个安卓的提权漏洞,该漏洞允许恶意应用从普通应用权限提权到system用户执行命令,漏洞信息与POC见(1].漏洞的成因源于在安卓系统(<5.0)中,java ...

  4. 论文第4章：iOS绘图平台的实现

    面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...

  5. Unity 动画

    Unity 并没有自带建模工具. 3D建模工具 maya, 3dmax, blender Skinned Mesh Renderer Mesh Renderer Mesh Filter Modelli ...

  6. windows下面go语言环境搭建

    步骤一:golang下载 下载地址是:http://www.golangtc.com/download 下载完成之后解压缩,放到你的c:/根目录下面.然后配置一下环境变量! 环境变量配置如下: 1.新 ...

  7. github神器--Atom编辑器初体验

    Atom 1.0正式式版已经出来好几天,自从听说github出了这神器之后,一直想体验一吧,这两天终于体验上. 下载: https://atom.io/ 其实,我的网速还不错,但总是下载到一半就没网速 ...

  8. 【干货分享】Google 的设计准则，素材和资源

    在谷歌,他们说, “专注于用户,所有其它的就会水到渠成 ”.他们遵循设计原则,寻求建立让用户惊喜的用户体验.谷歌一直挑战自己,为他们的用户创造一种视觉语言,综合优秀设计的经典原则和创新.谷歌设计规范是 ...

  9. springMVC源码分析之拦截器

    一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...

  10. java 版的复利计算器(张俊毅 周修文)

    (带有本金的选项卡的意思就是计算你在知道利率.年限和本息的情况下计算本金) 在利率的输入中能限制小数点的输入并且输入字母会被直接去除 每一个选项卡都有复利和单利的计算,并且在你计算之后会立即更新在下面 ...