顯示具有 HTML5 標籤的文章。 顯示所有文章
顯示具有 HTML5 標籤的文章。 顯示所有文章

2012年4月1日 星期日

頁面遮罩


我們常常可以在Web上看到,當有事件在背景執行時,Web會跳出半透明的視窗遮住後面的頁面,如:


這裡主要是利用JavaScript控制layer(Z-Index),以及style的opacity和style的display達成,layer控制element之間的stack,也就是MS office裡面常常提到的,"往上/下一層",style.opacity則是透明度,style.display控制顯示或隱藏,這些就可以達成頁面遮罩的功能了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript">
//<![CDATA[
    function show() {
      document.getElementById("xie").style.display = "";
      document.getElementById("content1").style.display = "";
      document.getElementById("content1").innerHTML = "內容<br/><input onclick='hide()' type='button' value='確定'/>";
    }

    function hide() {
      document.getElementById("xie").style.display = "none";
      document.getElementById("content1").style.display = "none";
    }
  //]]>
  </script>
  <title>JavaScript Mask</title>
</head>

<body>
  <div style=
  "filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; width: 100%; background-color: White; display: none; height: 100%; position: absolute; left: 0; top: 0;"
       id="xie"></div>

  <div style=
  "width: 100px; background-color: Red; display: none; height: 53px; position: absolute; left: 144px; top: 100px;"
       id="content1"></div>

  <input onclick="show()" type="button" value="顯示" />
</body>
</html>





2012年3月24日 星期六

動態產生HTML element -- document.createElement


我們可以利用document.createElement()動態的產生HTML的element,再利用Node.appendChild()插入某個Node底下,或利用Node.removeChild()自某個Node底下移除,更多資訊可以參考[1]。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>auto table</title>
</head>

<body>
  <table id="brook" summary=""></table>
  <script type="text/javascript">
  //<![CDATA[
    function create_new_row_button(eT, msg) {
        var eR = document.createElement("tr");
        var eC = document.createElement("td");
        var eB = document.createElement("input");
        eB.type = "button"
        eB.value= msg;
        eB.style.width = "100px";

        eT.appendChild(eR);
        eR.appendChild(eC);
        eC.appendChild(eB);
    }
    var station = [
        {name: "CHT"},
        {name: "TW"},
    ];
    for (var i = 0; i < station.length; i++) {
        create_new_row_button(document.getElementById("brook"),
                              station[i].name);
    }
  //]]>
  </script>
</body>
</html>






2011年11月13日 星期日

HTML5 canvas的初體驗


HTML5的新的element,canvas,可以在Browser上繪製圖表/圖片。使用時必須訂出繪製的範圍(width/height),接著就可以開始用JavaScript進行繪圖了。目前多數支援canvas的browser看來也都只有支援2D,未來應該會有3D的。
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Canvas/Simple shapes (rectangles)</title>
    </head>
<body>
    <canvas id="myCanvas" width="300" height="150">
    Fallback content, in case the browser does not support Canvas.
    </canvas>
    <script type="application/x-javascript">
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // 判斷是否能取得context
        if (elem && elem.getContext) {
            // 你只能對每一個canvas做initialize一次(getContext).
            // context = canvas . getContext(contextId [, ... ])
            var context = elem.getContext('2d');
            if (context) {
                // context.fillRect(x, y, w, h)
                // 畫方形
                context.fillRect(0, 0, 150, 100);

                // context.clearRect(x, y, w, h)
                // 清方形
                context.clearRect(100,50, 50, 50);

                // context.strokeRect(x, y, w, h)
                // 畫框
                context.strokeRect(150,100, 50, 50);
            }
        }
    </script>
</body>
</html>



fillRect(x, y, w, h)使用fillStyle來決定顏色。
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Canvas/FillRect attribute</title>
    </head>
<body>
    <canvas id="myCanvas" width="300" height="150">
    Fallback content, in case the browser does not support Canvas.
    </canvas>
    <script type="application/x-javascript">
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // 判斷是否能取得context
        if (elem && elem.getContext) {
            // 你只能對每一個canvas做initialize一次(getContext).
            // context = canvas . getContext(contextId [, ... ])
            var context = elem.getContext('2d');
            if (context) {
                context.fillStyle = 'pink';
                context.fillRect(0, 0, 50, 50);

                context.fillStyle = '#f00'; // red
                context.fillRect(50, 50, 50, 50);
                context.fillStyle = '#0f0'; // green
                context.fillRect(100, 100, 50, 50);
                context.fillStyle = '#00f'; // blue
                context.fillRect(150, 150, 50, 50);

                // RGBA(red, green, blue, alpha)
                // Alpha1是透明度
                context.fillStyle = 'RGBA(100, 100, 255, 0.2)';
                context.fillRect(50, 50, 150, 150);
            }
        }
    </script>
</body>
</html>



而strokeRect(x, y, w, h)則會使用strokeStyle(顏色), lineWidth(粗細), lineJoin(連接觸樣式),等屬性來決定,其實就是line style。
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Canvas/Line styles</title>
    </head>
<body>
    <canvas id="myCanvas" width="300" height="150">
    Fallback content, in case the browser does not support Canvas.
    </canvas>
    <script type="application/x-javascript">
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // 判斷是否能取得context
        if (elem && elem.getContext) {
            // 你只能對每一個canvas做initialize一次(getContext).
            // context = canvas . getContext(contextId [, ... ])
            var context = elem.getContext('2d');
            if (context) {
                // The beginPath() starts a new path
                context.beginPath();
                // reset the path to (0, 0)
                context.moveTo(0,0);
                context.strokeStyle = '#f00';

                // lineWidth是線的大小
                context.lineWidth = 1;
                context.strokeRect(0, 0, 20, 20);
                context.lineWidth = 10;
                context.strokeRect(30, 30, 20, 20);

                // LineJoin是連接處(轉角)的樣式
                context.lineJoin = 'bevel';
                context.strokeRect(60, 60, 20, 20);

                context.lineJoin = 'round';
                context.strokeRect(90, 90, 20, 20);

                context.lineJoin = 'miter';
                context.strokeRect(120, 120, 20, 20);
            }
        }
    </script>
</body>
</html>



參考資料:
  1. http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  2. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
  3. https://developer.mozilla.org/en/Canvas_tutorial/Using_images
  4. http://wiki.moztw.org/%E7%94%A8_Canvas_%E7%95%AB%E5%9C%96
  5. http://www.w3school.com.cn/htmldom/dom_obj_canvas.asp


source code:
https://github.com/brook-kuo/JavaScript/tree/master/html5/canvas