1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body,canvas {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 background: #000;
21 }
22
23 #can {
24 background: #FFF /* url('./images/index.jpg') no-repeat center; backgrond-size: cover */;
25 display: block; margin: 25px auto; border-radius: 2px; cursor: pointer;
26 }
27 </style>
28 <script type='text/javascript'>
29 $( function(){
30 var can = $( '#can' ).get( 0 );
31 var oCan = can.getContext( '2d' );
32 var oImg = new Image();
33 oImg.src = './images/index.jpg';
34 oImg.onload = function(){
35 oCan.drawImage( this , 0 , 0 , this.width , this.height );
36 var img = oCan.getImageData( 50 , 50 , 100 , 100 ); /* 参数 x,y,w,h 在这里面获取的是100*100宽高的颜色值:其中计算方法为100px*100px = 10000px 但是在canvas标签中每一个像素中都有rgba四个颜色值所以当我们在下面打印长度的时候显示的是40000个 */
37 //console.log( img.data.length ); /* 选定区域的数据(颜色值)长度 */
38 oCan.putImageData(img , can.width / 4, can.height / 4);/* 参数 : obj , x, y 可以实现局部拷贝效果 此函数作用将指定对象获取的数据放置到画布的指定位置上*/
39 }
40 } );
41 </script>
42 </head>
43 <body>
44 <canvas id='can' width='300' height='168'>检测到您的浏览器版本过低请升级您的浏览器版本以获取更好的用户体验...</canvas>
45 </body>
46 </html>
