當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 canvas之基础篇（一）

發布時間：2024/10/8 HTML 27 如意码农

生活随笔收集整理的這篇文章主要介紹了 HTML5 canvas之基础篇（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

if( !canvas || !canvas.getContext){

    return;

}

也可以使用modernizr.js庫，Modernizr是一個易用的輕量級庫，可以檢測各種web技術的支持情況。

二.canvas的屬性

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

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

三.獲取2D環境

通過調用Canvas對象的getContext()方法，可以獲得HTML5 的2D環境對象（CanvasRenderingContext2D）.該對象包含了在畫布上繪圖所需的所有方法和屬性。畫布的左上角為原點(0,0),坐標軸向下、向右為正方向。

獲取了2D環境之后可以干什么呢？能做的事有很多，比如使用strokeStyle, fillStyle ,globalAlpha, lineWidth, lineCap, line, join, miterLimit, shadowOffsetX,

shadowOffsetY, shadowBlur, shadowColor, global, font, CompositeOperation, textAlign, textBaseline這些屬性以及一些方法來制作游戲和動畫。

四.使用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。

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

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坐標。

總結

以上是生活随笔為你收集整理的HTML5 canvas之基础篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。