html5 Canvas基本特性的範例程式碼分享-H5教程-PHP中文網

首頁

web前端

H5教程

html5 Canvas基本特性的範例程式碼分享

黄舟

Mar 28, 2017 pm 03:53 PM

html5 Canvas 介紹

canvas的基本屬性與方法：width,height,getContext()等；

透過width與height來取得並設定目前canvas的寬度、高度；

透過getContext()方法來取得目前畫布的繪圖環境（context）；

## context=canvas.getContext("2d");context包含了我們需要的，在canvas上繪圖的所有方法及屬性；

context的笛卡爾座標系統中，canvas的左上角為原點；從原點往右為X軸的正向，往下為Y軸的正向；關於座標的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>s3</title>
        <script type="text/javascript" src="../script/modernizr-latest.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", eventWindowLoaded, false);
            var Debugger = function() {
            };
            Debugger.log = function(message) {
                try {
                    console.log(message);
                } catch (exception) {
                    return;
                }
            }
            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasSupport() {
                return Modernizr.canvas;
            }

            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasApp() {

                if(!canvasSupport()) {
                    return;
                }
                var theCanvas = document.getElementById("canvasOne");
                var context = theCanvas.getContext("2d");

                function drawScreen() {
                    //以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
                        context.moveTo(x, 0);
                        context.lineTo(x, 400);
                    }
                    for(var y = 0.5; y < 400; y += 10) {
                        context.moveTo(0, y);
                        context.lineTo(550, y);
                    }
                    context.strokeStyle = "#cecece";
                    context.stroke();
                    context.beginPath();
                    context.moveTo(50, 150);
                    context.lineTo(300, 150);
                    context.moveTo(250, 100);
                    context.lineTo(300, 150);
                    context.moveTo(300, 50);
                    context.lineTo(250, 100);
                    context.moveTo(450, 200);
                    context.lineTo(300, 50);
                    /*symmetry*/
                    context.moveTo(50, 250);
                    context.lineTo(300, 250);
                    context.moveTo(250, 300);
                    context.lineTo(300, 250);
                    context.moveTo(300, 350);
                    context.lineTo(250, 300);
                    context.moveTo(450, 200);
                    context.lineTo(300, 350);
                    /*end*/
                    context.moveTo(50, 150);
                    context.lineTo(50, 250);
                    /*write coordinate*/
                    context.font = "bold 12px sans-serif";
                    context.fillText("( 0 , 0 )", 8, 5);
                    context.fillText("(50, 150)", 58, 155);
                    context.fillText("(300, 150)", 308, 155);
                    context.fillText("(250, 100)", 258, 105);
                    context.fillText("(300, 150)", 308, 155);
                    context.fillText("(300, 50)", 308, 55);
                    context.fillText("(50, 250)", 58, 255);
                    context.fillText("(300, 250)", 308, 255);
                    context.fillText("(250, 350)", 258, 355);
                    context.fillText("(450, 200)", 458, 205);
                    context.strokeStyle = "#f00";
                    context.stroke();

                }
                drawScreen();
            }
        </script>
    </head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px;">
            <canvas id="canvasOne" width="550" height="400">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

context的所有屬性及方法都是與

current

state結合使用；

我們在真正理解Canvas是如何運作的之前，current state是必須掌握的概念;

current state 實事上是一個繪圖狀態的堆疊，這個堆疊從全域範圍內適用於整個canvas;

我們可以操作以下一些狀態：

Transformation matrix（變換矩陣）

###

Methods:scale, rotate, transform, and translate

######Clipping region（區域裁切）############Method:clip()########Properties of the context（context屬性）######

Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY,
shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.

###先簡單了解一下，會在以後的文章中對這些屬性、方法的使用，慢慢剖析；######國外[oreilly]寫的一個小程式（猜字母）：###

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <title>s1</title>        
        <script type="text/javascript" src="../script/modernizr-latest.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", eventWindowLoaded, false);
            function eventWindowLoaded() {
                canvasApp();
            }

            var Debugger = function() {
            };
            Debugger.log = function(message) {
                try {
                    console.log(message);
                } catch (exception) {
                    return;
                }
            }
            
            function canvasSupport() {
                return Modernizr.canvas;
            }

            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasApp() {
                var guesses = 0;
                var message = "Guess The Letter From a (lower) to z (higher)";
                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;
                if(!canvasSupport()) {
                    return;
                }
                var theCanvas = document.getElementById("canvasOne");
                var context = theCanvas.getContext("2d");
                initGame();
                function initGame() {
                    var letterIndex = Math.floor(Math.random() * letters.length);
                    letterToGuess = letters[letterIndex];
                    guesses = 0;
                    lettersGuessed = [];
                    gameOver = false;
                    window.addEventListener("keyup", eventKeyPressed, true);
                    drawScreen();
                }

                function eventKeyPressed(e) {
                    if(!gameOver) {
                        var letterPressed = String.fromCharCode(e.keyCode);
                        letterPressed = letterPressed.toLowerCase();
                        guesses++;
                        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() {
                    //Background
                    context.fillStyle = "#ffffaa";
                    context.fillRect(0, 0, 500, 300);
                    //Box
                    context.strokeStyle = "#000000";
                    context.strokeRect(5, 5, 490, 290);
                    context.textBaseline = "top";
                    //Date
                    context.fillStyle = "#000000";
                    context.font = "10px _sans";
                    context.fillText(today, 150, 10);
                    //Message
                    context.fillStyle = "#FF0000";
                    context.font = "14px _sans";
                    context.fillText(message, 125, 30);
                    //Guesses
                    context.fillStyle = "#109910";
                    context.font = "16px _sans";
                    context.fillText(&#39;Guesses: &#39; + guesses, 215, 50);
                    //Higher Or Lower
                    context.fillStyle = "#000000";
                    context.font = "16px _sans";
                    context.fillText("Higher Or Lower: " + higherOrLower, 150, 125);
                    //Letters Guessed
                    context.fillStyle = "#FF0000";
                    context.font = "16px _sans";
                    context.fillText("Letters Guessed: " + lettersGuessed.toString(), 10, 260);
                    if(gameOver) {
                        context.fillStyle = "#FF0000";
                        context.font = "40px _sans";
                        context.fillText("You Got It!", 150, 180);
                    }
                }

            }
        </script>
    </head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px;">
            <canvas id="canvasOne" width="500" height="300">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

###### ######

以上是html5 Canvas基本特性的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

掌握microdata：HTML5的分步指南May 14, 2025 am 12:07 AM

Microdatainhtml5enhancesseoanduserexperienceByByBybyBystructuredDatatoSearchEngines.1）useIteMscope，itemType，anditempropattributestomarkupcontentlikeSoreRoductSssSssSoRorevents.2）

HTML5表格中有什麼新功能？探索新輸入類型May 13, 2025 pm 03:45 PM

html5introducesnewinputtypesthatenhanceSerexperience，簡化開發和iMproveAccessibility.1）自動validatesemailformat.2）優化優化，優化OmportizeSmizesemizesemizesemizesemizesemizeSmobobileWithAnumericKeyPad.3）和Simimplifydateandtimeputientupits，並重新替代了Forcustemolcustemolcustene。