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,img,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; display: block; margin: 25px auto; border-radius: 2px;
25 }
26 </style>
27 <script type='text/javascript'>
28 $( function(){
29 var can = $( '#can' ).get( 0 );
30 var oCan = can.getContext( '2d' );
31 var img = document.createElement( 'img' );
32 oCan.beginPath();
33 oCan.fillStyle = getRandomColor();
34 //oCan.fillRect( 15 , 25 , 100 , 100 ); /* 用来判定剪切的范围作用在之后的图形中 */
35 oCan.rect( 20 , 50 , 30 , 150 ); /* 划定剪切的范围 */
36 oCan.clip(); /* 创建一个剪切区域,将以后绘制的图形全部限制到剪切区域中,没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。
37 */
38 oCan.fillRect( 20 , 50 , 100 , 100 );
39 $( 'body' ).get( 0 ).appendChild( img ).src = can.toDataURL(); /* 首先这个方法是canvas画布的方法而非绘图环境的,其次导出的是画布的64Base编码路径格式为PNG,再次在Googel FIrefox 等浏览器中可以直接使用邮件将图片导出为PNG格式 */
40
41 function getRandomColor(){
42 var num = '0xFFFFFF';
43 var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 );
44 if( length < 6 ){
45 for( var i = 0 ; i < 6 - len.length ; i++ ){
46 len += '0';
47 }
48 }
49 return '#' + len;
50 }
51 } );
52 </script>
53 </head>
54 <body>
55 <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器,以获取更好的体验效果...</canvas>
56 </body>
57 </html>