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
32 oCan.beginPath(); 33 oCan.fillStyle = getRandomColor(); 34 oCan.rect( 20 , 50 , 100 , 100 ); 35 oCan.fill(); 36 oCan.closePath(); 37
38 oCan.beginPath();/* 如果要想只點擊最后繪制的圖形有效果就使用開始路徑和閉合路徑包裹起來,如果要作用於整個畫布在任何有圖形地方點擊有效果就只使用一個大的開始及閉合路徑包裹起來既可以了 */
39 oCan.fillStyle = getRandomColor(); 40 //oCan.fillRect(200 , 150 , 100 , 100); /* 直接使用這種方式來使用oCan.isPointInPath(x,y)判斷是無效的,無論點擊哪里都是無效的 返回false */
41 oCan.rect( 200 , 150 , 100 , 100 );/* 要想使用 oCan.isPointInPath(x,y)來判斷就必須結合使用 37 38 行間代碼,否則無效 */
42 oCan.fill(); 43 oCan.closePath(); 44
45 can.onmousedown = function( ev ){ 46 var ev = window.event || ev; 47 var clientX = ev.clientX - this.offsetLeft; 48 var clientY = ev.clientY - this.offsetTop; 49 if( oCan.isPointInPath( clientX , clientY ) == 1 /*用於判斷在當前路徑中是否包含檢測點的方法,只檢測我們最后繪制出來的圖形*/
50 || oCan.isPointInPath( clientX , clientY ) == true
51 || oCan.isPointInPath() ){ /* 在不同的瀏覽器中對於布爾值的顯示不同 推薦直接使用最后一種方式來進行判斷,因為 這是JS中對於布爾值的判斷機制 (非0的數值,非空字符串,true均被認為真的)*/
52 alert( '點擊的是在我們最后繪制的圖形中...' ); 53 } 54 }; 55
56 function getRandomColor(){ 57 var num = '0xFFFFFF'; 58 var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 ); 59 if( length < 6 ){ 60 for( var i = 0 ; i < 6 - len.length ; i++ ){ 61 len += '0'; 62 } 63 } 64 return '#' + len; 65 } 66 } ); 67 </script>
68 </head>
69 <body>
70 <canvas id='can' width='500' height='450'>檢測到您的瀏覽器版本過低,請升級您的瀏覽器,以獲取更好的體驗效果...</canvas>
71 </body>
72 </html>
