HTML5 canvas之基礎篇（一）

時間 2019-11-30

原文原文鏈接

一.檢測瀏覽器是否支持canvas

if( !canvas || !canvas.getContext){
    return;
}

也可使用modernizr.js庫，Modernizr是一個易用的輕量級庫，能夠檢測各類web技術的支持狀況。javascript

二.canvas的屬性

主要屬性： id:id在Javascript代碼中用來指定特定的<canvas>標籤的名字； width:畫布的寬度，以像素爲單位； height:畫布的高度，以像素爲單位。css

其餘屬性：tableindex, title, class, accesskey, dir, draggable, hidden.html

三.獲取2D環境

經過調用Canvas對象的getContext()方法，能夠得到HTML5 的2D環境對象（CanvasRenderingContext2D）.該對象包含了在畫布上繪圖所需的全部方法和屬性。畫布的左上角爲原點(0,0),座標軸向下、向右爲正方向。java

獲取了2D環境以後能夠幹什麼呢？能作的事有不少，好比使用strokeStyle, fillStyle ,globalAlpha, lineWidth, lineCap, line, join, miterLimit, shadowOffsetX,web

shadowOffsetY, shadowBlur, shadowColor, global, font, CompositeOperation, textAlign, textBaseline這些屬性以及一些方法來製做遊戲和動畫。canvas

四.使用canvas

.在html文檔中的寫法，一般是這樣的：瀏覽器

<canvas id="canvas" width="500px" height="500px"></canvas>

注：對於canvas的寬和高，要在標籤裏定義，由於canvas的屬性width和height和CSS裏的width和height是不同的，canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而css的width和height是canvas在瀏覽器中被渲染的高度和寬度。可是能夠利用css的width和height來縮放canvas。dom

在javascript裏獲取canvas對象及2D環境：ide

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2D");

五.實際應用（猜字母遊戲：計算機隨機給出一個字母，用戶猜給出的字母是什麼，若是不對，會提示你猜的偏大仍是偏小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
    window.addEventListener("load" , eventWindowLoad, false);
    var Debugger = function() {};
    Debugger.log = function (message) { //輸出信息調試
        try{
            console.log(message);
        }catch(exception){
            return;
        }
    }

    function eventWindowLoad() {
        canvasApp();
    }

    function canvasApp() {
        if( !canvas || !canvas.getContext ){
            return;
        }else{
            var theCanvas = document.getElementById("canvas");
            var context = theCanvas.getContext("2d");
            var guess = 0;
            var message
            var letters = [
            "a", "b", "c", "d", "e", "f","g","h","i", "j", "k", "l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"
            ];
            var today = new Date();
            var letterToGuess = "";
            var higherOrLower = "";
            var lettersGuessed;
            var gameOver = false;

            initGame();
            
            function initGame() {
                var letterIndex = Math.floor(Math.random()*letters.length);
                letterToGuess = letters[letterIndex];
                guess = 0;
                lettersGuessed = [];
                gameOver = false;
                window.addEventListener("keydown", eventKeyPressed, true);
                drawScreen();
            }
            
            function eventKeyPressed(e) {
                if(!gameOver){
                    var letterPressed = String.fromCharCode(e.keyCode);
                    letterPressed = letterPressed.toLowerCase();
                    guess++;
                    lettersGuessed.push(letterPressed);

                    if(letterPressed == letterToGuess){
                        gameOver = true;
                    }else{
                        letterIndex = letters.indexOf(letterToGuess);
                        guessIndex = letters.indexOf(letterPressed);

                        Debugger.log(guessIndex);
                        if(guessIndex < 0){
                            higherOrLower = "That is not a letter";
                        }else if(guessIndex >letterIndex){
                            higherOrLower = "Lower";
                        }else{
                            higherOrLower = "Higher";
                        }
                    }
                    drawScreen();
                }
            }
            function drawScreen() {
                context.fillStyle = "#ffffaa";
                context.fillRect(0, 0, 500, 300);

                context.strokeStyle = "#000000";
                context.strokeRect(5,5,490, 290);

                context.textBaseLine = "top";
                context.fillStyle = "#000000";
                context.font = "10px";
                context.fillText(today, 150, 10);

                context.fillStyle = "#ff0000";
                context.font = "14px";
                context.fillText(message, 125, 30);

                context.fillStyle = "#109910";
                context.font = "16px";
                context.fillText("Guesses:" + guess, 125, 50);

                context.fillStyle = "#000000";
                context.font = "16px";
                context.fillText("higherOrLower:" + higherOrLower, 150, 125);


                context.fillStyle = "#ff0000";
                context.font = "16px";
                context.fillText("Letter Guessed:" + lettersGuessed.toString(), 10, 260);

                if(gameOver){
                    context.fillStyle = "#ff0000";
                    context.font = "40px";
                    context.fillText ("You got it!", 150, 180);
                }
            }
        }
    }

</script>
</html>

上例用到的知識點：

context.fillStyle:定義填充的顏色；context.strokeStyle:定義填充邊緣的顏色； context.fillRect(x, y,width,height):繪製一個矩形，x是繪製的矩形的左上角的x座標,y是繪製的矩形的左上角的y座標,width：是繪製的矩形的寬度,height是繪製的矩形的高度；context.font：定義繪製文本的字號和字體；context.textBaseLine:定義文本的對齊的基準線，取值有top,bottom,middle,hanging,ideographic； context.fillText(text, x, y):定義要繪製的文本，text是要繪製的文本內容,x是文本放置的x座標,y是文本放置的y座標。字體

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。