HTML 5深入淺出教學篇之九

作者：webabcd 2012-05-31 09:35:43

開發前端

呈現文本|font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText,TextMetrics.width

介紹

HTML 5: 畫布（canvas）之承載媒體

呈現文本 - font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width

呈現圖片 - drawImage()

呈現視頻截圖 - drawImage()

呈現其他畫布 - drawImage()

示例

1、呈現文本 | font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
canvas/media/text.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>在 canvas 上呈現文本的 demo</title> 
</head> 
<body> 
    <canvas id="canvas" width="600" height="600" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">在畫布上呈現一些文本</button> 
    <button type="button" onclick="clearIt();">清除畫布</button> 
    <script type="text/javascript"> 
        var canvas = document.getElementById('canvas');  
        var ctx = canvas.getContext('2d');  
        function drawIt() {  
            clearIt();  
            ctx.beginPath();  
            ctx.moveTo(0, canvas.height / 2);  
            ctx.lineTo(canvas.width, canvas.height / 2);  
            ctx.moveTo(canvas.width / 2, 0);  
            ctx.lineTo(canvas.width / 2, canvas.height);  
            ctx.stroke();  
            /*  
             * context.font - 語法與 CSS 中的 font 屬性相同，默認值為 10px sans-serif  
             *  
             * context.textAlign - 可能的值為：start, end, left, right, center；默認值為：start  
             *  
             * context.textBaseline - 可能的值為：top, hanging, middle, alphabetic, ideographic, bottom；默認值為：alphabetic  
             */  
            ctx.font = 'italic 24px 宋體';  
            ctx.fillStyle = "blue";  
            ctx.textBaseline = "top";  
            // 不同 textAlign 的效果  
            ctx.textAlign = "start";  
            ctx.fillText("Horizontal", canvas.width / 2, 0);  
            ctx.textAlign = "end";  
            ctx.fillText("Horizontal", canvas.width / 2, 30);  
            ctx.textAlign = "left";  
            ctx.fillText("Horizontal", canvas.width / 2, 60);  
            ctx.textAlign = "right";  
            ctx.fillText("Horizontal", canvas.width / 2, 90);  
            ctx.textAlign = "center";  
            ctx.fillText("Horizontal", canvas.width / 2, 120);  
            ctx.textAlign = "start";  
            // 不同 textBaseline 的效果  
            ctx.textBaseline = "top";  
            ctx.fillText("Vertical", 0, canvas.height / 2);  
            ctx.textBaseline = "hanging";  
            ctx.fillText("Vertical", 100, canvas.height / 2);  
            ctx.textBaseline = "middle";  
            ctx.fillText("Vertical", 200, canvas.height / 2);  
            ctx.textBaseline = "alphabetic";  
            ctx.fillText("Vertical", 300, canvas.height / 2);  
            ctx.textBaseline = "ideographic";  
            ctx.fillText("Vertical", 400, canvas.height / 2);  
            ctx.textBaseline = "bottom";  
            ctx.fillText("Vertical", 500, canvas.height / 2);  
            /*  
             * context.strokeStyle - 調用 strokeText() 時字體的筆劃顏色  
             *  
             * context.fillStyle - 調用 fillText() 時字體的填充顏色  
             *  
             * context.fillText(text, x, y [, maxWidth]) - 以填充的方式繪制文本內容  
             *   text - 需要呈現的文本字符串  
             *   x, y - 參考點坐標，textAlign 和 textBaseline 均會以此點為參考點  
             *   maxWidth - 顯示區域的最大長度，必要時會強制壓縮文本的長度。可選參數  
             *  
             * context.strokeText(text, x, y [, maxWidth]) - 以筆劃的方式繪制文本內容。參數說明同 fillText()  
             */  
            ctx.font = '64px 宋體';  
            ctx.strokeStyle = 'blue';  
            ctx.strokeText("strokeText", 0, 400);  
            ctx.strokeText("strokeText", 0, 500, 100);  
            /*  
             * context.measureText(text) - 返回指定文本內容在當前上下文環境中的度量對象，即 TextMetrics 類型的對象  
             * TextMetrics.width - TextMetrics 對象有一個名為 width 的只讀屬性，用于獲取 TextMetrics 對象的長度值  
             */  
            var metrics = ctx.measureText("strokeText");  
            alert(metrics.width);  
        }  
        function clearIt() {  
            ctx.clearRect(0, 0, 600, 600);  
            ctx.textAlign = "start";  
            ctx.textBaseline = "alphabetic";  
        }  
    </script> 
</body> 
</html>

#p#

2、呈現圖片 | drawImage()canvas/media/image.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>在 canvas 上呈現圖片的 demo</title> 
</head> 
<body> 
    <canvas id="canvas" width="800" height="600" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">在畫布上呈現圖片</button> 
    <button type="button" onclick="clearIt();">清除畫布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        function drawIt() {  
            clearIt();  
            var img = new Image();  
            img.onload = function () {  
                /*  
                 * context.drawImage() 的可繪制對象包括：HTMLImageElement, HTMLVideoElement, HTMLCanvasElement  
                 *  
                 * context.drawImage(image, x, y) - 繪制圖像  
                 *   image - 圖像對象，可以來自 img 標簽  
                 *   x - 圖像繪制到畫布后的左上角的 x 坐標  
                 *   y - 圖像繪制到畫布后的左上角的 y 坐標  
                 *  
                 * context.drawImage(image, x, y, width, height) - 繪制圖像  
                 *   image - 圖像對象，可以來自 img 標簽  
                 *   x - 圖像繪制到畫布后的左上角的 x 坐標  
                 *   y - 圖像繪制到畫布后的左上角的 y 坐標  
                 *   width - 圖像繪制到畫布后的寬  
                 *   height - 圖像繪制到畫布后的高  
                 *  
                 * context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) - 繪制圖像  
                 *   image - 圖像對象，可以來自 img 標簽  
                 *   sourceX - 截取源圖像，相對于源圖像的左上角的 x 坐標，  
                 *   sourceY - 截取源圖像，相對于源圖像的左上角的 y 坐標，  
                 *   sourceWidth - 截取源圖像，需要截取的寬  
                 *   sourceHeight - 截取源圖像，需要截取的高  
                 *   destX - 圖像繪制到畫布后的左上角的 x 坐標  
                 *   destY - 圖像繪制到畫布后的左上角的 y 坐標  
                 *   destWidth - 圖像繪制到畫布后的寬  
                 *   destHeight - 圖像繪制到畫布后的高  
                 *  
                 */  
                ctx.drawImage(img, 0, 0); // 按圖像原始大小顯示到畫布上  
                ctx.drawImage(img, 0, 0, 200, 200); // 顯示圖像到畫布上，并指定其寬高  
                ctx.drawImage(img, 50, 0, 400, 100, 0, 300, 200, 50); // 截取源圖像的一部分顯示到畫布上，并指定被截取部分顯示時的寬和高  
            }  
            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";  
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";  
        }  
        function clearIt() {  
            ctx.clearRect(0, 0, 800, 600);  
        }  
    </script> 
</body> 
</html>

#p#

3、呈現視頻截圖 | drawImage()canvas/media/video.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>在 canvas 上呈現視頻截圖的 demo</title> 
</head> 
<body> 
    <video id="video" width="400" height="240" src="http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/big_buck_bunny_trailer_480p_high.mp4" controls preload="metadata"> 
        您的瀏覽器不支持 video 標簽  
    </video>    
    <br /> 
    <canvas id="canvas" width="400" height="240" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">在畫布上呈現視頻截圖</button> 
    <button type="button" onclick="clearIt();">清除畫布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var video = document.getElementById('video');  
        var timerId = -1;  
        function drawIt() {  
            clearIt();  
            timerId = setInterval(drawVideo, 300);  
            function drawVideo() {  
                if (!isNaN(video.duration)) {  
                    /*  
                     * context.drawImage() 的可繪制對象包括：HTMLImageElement, HTMLVideoElement, HTMLCanvasElement  
                     *  
                     * 呈現 video 對象的當前截圖，其他參數說明詳見 image.html  
                     */  
                    ctx.drawImage(video, 0, 0, 400, 240);  
                }  
            }   
        }  
        function clearIt() {  
            ctx.clearRect(0, 0, 400, 240);  
            clearInterval(timerId);  
        }  
    </script> 
</body> 
</html>

#p#

4、呈現其他畫布 | drawImage()canvas/media/canvas.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>在 canvas 上呈現其他 canvas 的 demo</title> 
</head> 
<body> 
    <canvas id="canvas" width="300" height="300" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標簽  
    </canvas> 
    <br /> 
    <canvas id="canvas2" width="300" height="300" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">在畫布上呈現其他畫布</button> 
    <button type="button" onclick="clearIt();">清除畫布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var ctx2 = document.getElementById('canvas2').getContext('2d');  
        function drawIt() {  
            clearIt();  
            var img = new Image();  
            img.onload = function () {  
                ctx.drawImage(img, 0, 0, 300, 300);  
                /*  
                 * context.drawImage() 的可繪制對象包括：HTMLImageElement, HTMLVideoElement, HTMLCanvasElement  
                 *  
                 * 呈現指定的 canvas 的當前圖像，其他參數說明詳見 image.html  
                 */  
                ctx2.drawImage(document.getElementById('canvas'), 0, 0);  
            }  
            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";  
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";  
        }  
        function clearIt() {  
            ctx.clearRect(0, 0, 300, 300);  
            ctx2.clearRect(0, 0, 300, 300);  
        }  
    </script> 
</body> 
</html>

[源碼下載]

原文鏈接：http://www.cnblogs.com/webabcd/archive/2012/02/16/2353563.html

責任編輯：張偉來源： webabcd的博客

HTML5