目前分類:HTML (4)

瀏覽方式: 標題列表 簡短摘要

對於慣於使用 CSS 來設定 Element 外觀的前端開發者而言,對於 Canvas 可能會有些抗拒,原因是 Canvas 所有的呈現圖像皆須以 JavaScript 手動刻出來,雖然很麻煩但是能製作出來非常炫麗的效果,了解原理以後在撰寫方面也比較自由。

在開始之前首先我們必須針對不支援 Canvas 的瀏覽器作處理。(儘管目前大多數瀏覽器都支援,但我認為仍需添加這機制,就算是提醒用戶升級瀏覽器這樣對於整體網站的顧客友善度也是好的

<canvas>
  <p>Your Broswer not support canvas</p>
</canvas>

運用瀏覽器不認識 Canvas 會忽略它的這個特點,可在 Canvas 區塊內添加所謂的替代顯示方案,可以加上文字、圖片、甚至是 Flash。

有了替代顯示方案後,我們可以開始著重在 Canvas 本身的撰寫,首先我們先創造一個 Canvas Element 並且用 Canvas 本身的 width 、 height 屬性設定寬高。大多數的開發者可能會習慣用 CSS 來設定,但此舉會造成在 Canvas 上繪製的圖像變形

<canvas id="game" width="320px" height="240px">
  <p>Your Broswer not support canvas</p>
</canvas>
#game {
  border: 2px dashed lightblue;
}

下面是上面代碼的呈現效果,我們可以得到一個淡藍色的虛線框畫布。

文章標籤

法奇 發表在 痞客邦 留言(0) 人氣()


當你在看這篇文章時,你可以發現你能自由編輯目前畫面的所有東西。再講白一點,你可以隨意剪下、貼上你所看得到的所有網頁顯示元素,能做到這點正是 designMode 的強大之處。

document.designMode = "on";//on || off



contenteditable 、 designMode 能讓使用者在瀏覽器上直接編輯網頁,達到所視即所得的效果,這感覺有點像把瀏覽器變身成簡易版的 FrontPage or Dreamweaver

那可以應用在哪些方面呢?舉個例子:像是寫 Blog 時會用到的編輯器有些就是此等應用。

文章標籤

法奇 發表在 痞客邦 留言(0) 人氣()


  1. 如果有寫 Js 而且又在本地端執行寫好的 page,IE會跳出下圖訊息。Image 9.jpg

    想要在本地調用,又不想每次都點允許按鈕,可以在 head 內加入:

    <!-- saved from url=(0014)about:internet -->
    
  2. 想作練習或是想分享 Demo Source 給其他開發者討論,可以來到 JS BIN。(用於討論 Bug 或是新技術非常方便
    http://jsbin.com/?html,css,output
  3. 如果想查詢某個功能各瀏覽器的支援度,可以到 caniuse 查詢。
    http://caniuse.com/
  4. 在 ios mobile safari 環境下,a:active 不起作用。
    可在 Element 內加入 ontouchstart="" 他就會神奇地開始工作了
    <a ontouchstart="">連結</a>
    
     

 

文章標籤

法奇 發表在 痞客邦 留言(0) 人氣()


最近又準備回來寫 HTML 了,相隔數年的重新接觸啊!

這篇純粹是把一些古早的 HTML TAG 給集合起來,如果有回憶起甚麼在陸續增加。


  • 用來製作跑馬燈的 HTML TAG,90 年代可是非常風行的。
    <marquee> 法奇的帝窩 </marquee>
            
    
     
  • VBScript,曾經跟 JavaScript 爭奪天下的語言,可惜已經落敗,目前只有 IE10 以下才支援。現在大家都只知道 alert ,已經沒甚麼人知道 msgbox 了。
    <script language="VBScript">
        MsgBox "i am king"
    </script>
            
    
     
  • 用來製作閃爍文字的 HTML TAG,現在多以 GIF 動畫圖檔呈現,此 TAG 已經完全被時間的洪流給淹沒。

法奇 發表在 痞客邦 留言(0) 人氣()

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼