當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML5 canvas之基础篇（一）

發(fā)布時(shí)間：2024/10/8 HTML 34 如意码农

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

一.檢測(cè)瀏覽器是否支持canvas

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

    return;

}

也可以使用modernizr.js庫(kù)，Modernizr是一個(gè)易用的輕量級(jí)庫(kù)，可以檢測(cè)各種web技術(shù)的支持情況。

二.canvas的屬性

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

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

三.獲取2D環(huán)境

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

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

shadowOffsetY, shadowBlur, shadowColor, global, font, CompositeOperation, textAlign, textBaseline這些屬性以及一些方法來(lái)制作游戲和動(dòng)畫(huà)。

四.使用canvas

.在html文檔中的寫(xiě)法，通常是這樣的：

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

注：對(duì)于canvas的寬和高，要在標(biāo)簽里定義，因?yàn)閏anvas的屬性width和height和CSS里的width和height是不一樣的，canvas標(biāo)簽的width和height是畫(huà)布實(shí)際寬度和高度，繪制的圖形都是在這個(gè)上面。而css的width和height是canvas在瀏覽器中被渲染的高度和寬度。但是可以利用css的width和height來(lái)縮放canvas。

在javascript里獲取canvas對(duì)象及2D環(huán)境：

var theCanvas = document.getElementById("canvas");

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

五.實(shí)際應(yīng)用（猜字母游戲：計(jì)算機(jī)隨機(jī)給出一個(gè)字母，用戶猜給出的字母是什么，如果不對(duì)，會(huì)提示你猜的偏大還是偏小）

<!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) { //輸出信息調(diào)試

        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>

上例用到的知識(shí)點(diǎn)：

context.fillStyle:定義填充的顏色；context.strokeStyle:定義填充邊緣的顏色； context.fillRect(x, y,width,height):繪制一個(gè)矩形，x是繪制的矩形的左上角的x坐標(biāo),y是繪制的矩形的左上角的y坐標(biāo),width：是繪制的矩形的寬度,height是繪制的矩形的高度；context.font：定義繪制文本的字號(hào) 和字體；context.textBaseLine:定義文本的對(duì)齊的基準(zhǔn)線，取值有top,bottom,middle,hanging,ideographic； context.fillText(text, x, y):定義要繪制的文本，text是要繪制的文本內(nèi)容,x是文本放置的x坐標(biāo),y是文本放置的y坐標(biāo)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。