如果對Canvas如何畫圓形沒有概念的，可以先看這一篇。
先看結果，如下圖：
先在body中加入一個canvas：
然後再加入下列Javascript程式碼：
上列畫圓餅圖的部份，若要詳細說明，請參考這裡，畫甜甜圈部份，請參考程式碼中註解。
參考來源：
2013年9月10日 星期二
[筆記]使用Canvas畫大餅 (pie chart) 再配甜甜圈 (doughnut chart)
最近因需要開始去研究html5、如何使用canvas畫圖表，這個範例，是以後可能要實作的應用之一，滿陽春的，小小心得，在做個筆記、分享。
如果對Canvas如何畫圓形沒有概念的，可以先看這一篇。
先看結果，如下圖：
先在body中加入一個canvas：
參考來源：
如果對Canvas如何畫圓形沒有概念的，可以先看這一篇。
先看結果，如下圖：
先在body中加入一個canvas：
參考來源：
2013年9月9日 星期一
[分享]使用Google Chrom瀏覽器中的Screen Capture擴充程式擷取整個網頁
有時候要擷取整個網頁，當網頁的高度超過螢幕的高度時，使用一般電腦版本的畫面擷取軟體，來擷取整個網頁是有點麻煩的事，但若是使用Google Chrome瀏覽器，再加上一個Google開發的Screen Capture擴充程式，擷取整個網頁就會變得非常容易。
安裝網址如下：
https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg?utm_source=gmail
開啟後，點按右上角的【+ 免費】，即可開裝：
安裝完成後，可以在Chrome上看到該工具的圖示，若要擷取整個網頁，就在該網頁中，點按該圖示，選擇【Capture whole page】，就可以將整個網頁畫面擷取下來。
在擷取完成的畫面中的右上角，有幾個選項，點按【Save】，就可以將擷取的畫面存成一個圖檔。
下列是拜歐擷取整個yahoo首頁的結果：
安裝網址如下：
https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg?utm_source=gmail
開啟後，點按右上角的【+ 免費】，即可開裝：
安裝完成後，可以在Chrome上看到該工具的圖示，若要擷取整個網頁，就在該網頁中，點按該圖示，選擇【Capture whole page】，就可以將整個網頁畫面擷取下來。
在擷取完成的畫面中的右上角，有幾個選項，點按【Save】，就可以將擷取的畫面存成一個圖檔。
下列是拜歐擷取整個yahoo首頁的結果：
2013年9月8日 星期日
【解決】使用Windows 8連ADSL，出現「錯誤651:數據機(或其他連線裝置)回報了一個錯誤」
今天拜歐終於請人來家裡裝了ADSL，當工程師裝好測試完成離去後，拜歐興奮拿起自己的電腦來測試，卻一直出現下列的錯誤訊息：
因為有看到工程師測試的過程，一直覺得是拜歐自己記錯密碼了，還在猶豫要不要跑一趟服務門市去查密碼。但還是先Google了一下，發現ADSL連不上有可能是網卡沒啟動的關係，於是打開裝置管理員進行確認。
拜歐的作業系統是Win8，就在最左下角點按滑鼠右鍵，開啟【裝置管理員】，再找到【網路介面卡】，再點按滑鼠右鍵後，點按【啟用】，如下圖：
若是Window 7或XP，可以點按【我的電腦】，然後【管理】，就可以找到【裝置管理員】。
因為有看到工程師測試的過程，一直覺得是拜歐自己記錯密碼了，還在猶豫要不要跑一趟服務門市去查密碼。但還是先Google了一下，發現ADSL連不上有可能是網卡沒啟動的關係，於是打開裝置管理員進行確認。
拜歐的作業系統是Win8，就在最左下角點按滑鼠右鍵，開啟【裝置管理員】，再找到【網路介面卡】，再點按滑鼠右鍵後，點按【啟用】，如下圖：
若是Window 7或XP，可以點按【我的電腦】，然後【管理】，就可以找到【裝置管理員】。
2013年9月6日 星期五
【分享】利用FileMenu Tools新增右鍵選單
現在免安裝 (Protable) 的軟體愈來愈多，這類的軟體通常不用安裝就可使用，但像有些文字編輯軟體，會希望在使用右鍵就可以快速找到，並使用它來開啟某些檔案，這時，就可以安裝FileMenu Tools來達到這個目的。
按此下載。
安裝完成後，在任何一處點按滑鼠右鍵，可以看到右鍵選單多了FileMenu Tools：
`
點按【Configure FileMenu Tools...】，會出現下列視窗：
這裡拜歐以新增一個可以開啟文字的免安裝軟體「Notepad++」為例。
在上列視窗右上角【Action】區塊中，點按【Add Command】，在下方【Properties】區塊【Menu Text】中，輸入自己定義的名稱，這是要顯示在選單中的名稱，這裡是「Notepad++」。
在下拉到【Program】欄位，點一下右邊的空白處，會出現下圖紅框中的按鈕，點按開啟選擇要啟動的程式。
這裡拜歐選的是免安裝的「Notepad++」，如下：
選擇好後，點按右下方的開啟鈕。
這時，就會看到「Notepad++」出現在右方的選單中，再點按左邊綠色勾勾確認後關閉設定視窗。
再來選擇電腦中任一個文字檔案點按滑鼠右鍵，就可以找到剛設定的「Notepad++」用以開啟該檔案。
除了可以自訂右鍵選單外，還有一些好用的功能，如移動、複製，或刪除檔案等，拜歐覺得很是實用。
這個軟體拜歐用了有一段時間了，是一直有在發展的軟體，有需要可以試用看看，如果覺得好用，請記得給予一些實質的鼓勵喔。
按此下載。
安裝完成後，在任何一處點按滑鼠右鍵，可以看到右鍵選單多了FileMenu Tools：
點按【Configure FileMenu Tools...】，會出現下列視窗：
這裡拜歐以新增一個可以開啟文字的免安裝軟體「Notepad++」為例。
在上列視窗右上角【Action】區塊中，點按【Add Command】，在下方【Properties】區塊【Menu Text】中，輸入自己定義的名稱，這是要顯示在選單中的名稱，這裡是「Notepad++」。
在下拉到【Program】欄位，點一下右邊的空白處，會出現下圖紅框中的按鈕，點按開啟選擇要啟動的程式。
這裡拜歐選的是免安裝的「Notepad++」，如下：
選擇好後，點按右下方的開啟鈕。
這時，就會看到「Notepad++」出現在右方的選單中，再點按左邊綠色勾勾確認後關閉設定視窗。
再來選擇電腦中任一個文字檔案點按滑鼠右鍵，就可以找到剛設定的「Notepad++」用以開啟該檔案。
除了可以自訂右鍵選單外，還有一些好用的功能，如移動、複製，或刪除檔案等，拜歐覺得很是實用。
這個軟體拜歐用了有一段時間了，是一直有在發展的軟體，有需要可以試用看看，如果覺得好用，請記得給予一些實質的鼓勵喔。
2013年9月4日 星期三
[筆記]GlassFish v3的部署設定檔：sun-web.xml
有時要找一個設定檔，從空的XML開始，實在是有點為難自己，下列sun-web.xml是GlassFish v3特有的部署描述檔 (deployment descriptor)，在此做下筆記，以後比較好找。
節錄自：http://www.slideshare.net/krizsan/ocp-jbcd-6-study-notes，p.187/EJBSecurityAnnotations superusers ivan plainusers plain-users runasadmin runas-superuser
2013年9月1日 星期日
【分享】在Google Blogger中使用SyntaxHighlighter來顯示程式碼
SyntaxHighlighter是使用JavaScript開發，用來在網頁中展示程式碼語法的一套工具，之前一直想把這套工具引入到拜歐的部落格中，但試了一次後，就完全忘了這檔事，直至最近看了這篇教學，才又想起要讓部落格加點功能來。
第一步就是到SyntaxHighlighter的網站下載該工具，然後你需要一個地方放相關的JavaScript函式庫，可以對外開放，讓瀏覽的使用者可以連得到，這樣使用者連到你的Blogger時，這些函式庫才有作用，拜歐的JS函式庫是放在Google Site這邊，基本上只要有Google帳號，就可以使用，可以參考這篇教學，或搜尋Google Site，照說明申請。
當上傳完所需的檔案後，在Blogger的管理介面，點選編輯HTML，如下：
然後找到區塊，可以把要引入的CSS和JS直接貼在</head>前面，如下圖，其中黃線框起來的就是要引入的檔案：
如下：
其中，「js」檔案，可以在下載的「scripts」中找到，「css」檔案可以在「styles」中找到。「shCore.js」是一定要放的，其他語言的顯示，都有一個對應的「js」檔案，只要引部落格中要展示的語言對應的「js」檔即可。
因為是在Google Blogger中使用，要在<script>區塊中加入：
再來，要貼上程式碼，先切換到「HTML」編輯模式，再如下方式：
相對應的語法代碼，可以這裡找到，如上列區要插入的是JavaScript代碼，就替換成「js」。
參考來源：
http://sharedderrick.blogspot.tw/2010/10/google-blogger-syntaxhighlighter-3083.html
http://www.cc.ntu.edu.tw/chinese/epaper/0016/20110320_1608.html
https://sites.google.com
第一步就是到SyntaxHighlighter的網站下載該工具，然後你需要一個地方放相關的JavaScript函式庫，可以對外開放，讓瀏覽的使用者可以連得到，這樣使用者連到你的Blogger時，這些函式庫才有作用，拜歐的JS函式庫是放在Google Site這邊，基本上只要有Google帳號，就可以使用，可以參考這篇教學，或搜尋Google Site，照說明申請。
當上傳完所需的檔案後，在Blogger的管理介面，點選編輯HTML，如下：
然後找到區塊，可以把要引入的CSS和JS直接貼在</head>前面，如下圖，其中黃線框起來的就是要引入的檔案：
如下：
其中，「js」檔案，可以在下載的「scripts」中找到，「css」檔案可以在「styles」中找到。「shCore.js」是一定要放的，其他語言的顯示，都有一個對應的「js」檔案，只要引部落格中要展示的語言對應的「js」檔即可。
因為是在Google Blogger中使用，要在<script>區塊中加入：
SyntaxHighlighter.config.bloggerMode = true;
再來，要貼上程式碼，先切換到「HTML」編輯模式，再如下方式：
function abc(){
}
相對應的語法代碼，可以這裡找到，如上列區要插入的是JavaScript代碼，就替換成「js」。
參考來源：
http://sharedderrick.blogspot.tw/2010/10/google-blogger-syntaxhighlighter-3083.html
http://www.cc.ntu.edu.tw/chinese/epaper/0016/20110320_1608.html
https://sites.google.com
訂閱：
文章 (Atom)