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

了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

See all articles