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,div,select,option {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 background: #666;
21 }
22
23 #can {
24 display: block; margin: 25px auto; background: #FFF; border-radius: 2px;
25 }
26 </style>
27 <script type='text/javascript'>
28 $( document ).ready( function(){
29 var can = $( '#can' ).get( 0 );
30 var oCan = can.getContext( '2d' );
31 oCan.beginPath();
32 oCan.fillStyle = '#F00';
33 oCan.fillRect( 100 , 100 , 100 , 100 );
34 oCan.save();
35 oCan.globalAlpha = .5;
36 /*
37 global : 全球
38 composite : 混合物
39 operation : 操作 作用
40 object.globalCompositeOperatin : 设置或返回新图像是如何绘制到已有的图像上的
41 属性:
42 原图像指后绘制的图像,目标图像指已经存在的图像
43
44 source-over : 默认 设置目标图像显示在原图像上
45 source-atop : 在目标图像的顶部显示原图像,原图像位于目标图像之外的部分是不可见的
46 source-in : 在目标图像中显示原图像,只有目标图像中的原图像会部分显示,目标图像是透明的
47 source-out : 在目标图像之外显示原图像,只会显示目标图像之外的原图像部分,目标图像是透明的
48
49 destination-over : 在原图像上方显示目标图像
50 destination-atop: 在原图像的顶部显示目标图像,原图像之外的目标图像部分是不可见得
51 destination-in : 在原图像中显示目标图像,只有愿图像内的目标图像会部分得以显示,原图像是透明
52 destination-out:在原图像之外显示目标图像,只会显示原图像外的目标图像会部分得以显示,愿图像透明
53 lighter : 愿图像+目标图像 (交互部分会以合成颜色进行显示)
54 copy : 显示原图像 , 忽视目标图像
55 xor : 使用异或对原图像和目标图像进行整合
56 */
57 /* oCan.globalCompositeOperation = 'source-over'; */
58 /* oCan.globalCompositeOperation = 'destination-over'; */
59 /* oCan.globalCompositeOperation = 'source-atop'; */
60 /* oCan.globalCompositeOperation = 'destination-atop'; */
61 /* oCan.globalCompositeOperation = 'source-in'; */
62 /* oCan.globalCompositeOperation = 'destination-in'; */
63 /* oCan.globalCompositeOperation = 'source-out'; */
64 /* oCan.globalCompositeOperation = 'destination-out'; */
65 /* oCan.globalCompositeOperation = 'lighter'; */
66 /* oCan.globalCompositeOperation = 'copy'; */
67 /* oCan.globalCompositeOperation = 'xor'; */
68 oCan.globalCompositeOperation = 'destination-in';
69 oCan.fillStyle = '#0F0';
70 oCan.fillRect( 150 , 150 , 100 , 100 );
71 oCan.restore();
72 oCan.closePath();
73 } )
74 </script>
75 </head>
76 <body>
77 <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas>
78 </body>
79 </html>