html5 Canvas의 기본 기능에 대한 샘플 코드 공유-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5 Canvas의 기본 기능에 대한 샘플 코드 공유

黄舟

Mar 28, 2017 pm 03:53 PM

html5 캔버스 소개

캔버스 기본 속성 및 메소드: width, height, getContext() 등

은 width를 전달합니다. height 현재 캔버스의 너비와 높이를 가져오고 설정합니다.

getContext() 메서드를 통해 현재 캔버스의 그리기 환경(컨텍스트)을 가져옵니다.

context=canvas.getContext("2d");

context에는

컨텍스트의 데카르트 좌표계에서 캔버스에 그리는 데 필요한 모든 메서드와 속성이 포함되어 있습니다. , 캔버스 왼쪽 상단이 원점이며, 원점에서 오른쪽이 양의 방향입니다.

현재

상태

와 함께 사용됩니다. 캔버스가 어떻게 작동하는지 진정으로 이해하기 전에 현재 상태는 숙지해야 하는 개념입니다. 현재 상태는 실제로 전체 캔버스에 적용되는 그리기 상태의 스택입니다.

다음 상태를 작동합니다:

변환 행렬 행렬)

<!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>

로그인 후 복사

클리핑 영역(영역 클리핑)

방법 :clip()
컨텍스트 속성(컨텍스트 속성)

Methods:scale, rotate, transform, and translate

로그인 후 복사

먼저 간략하게 살펴보고 이러한 속성의 사용법을 천천히 분석해 보겠습니다. 향후 기사의 방법

작성: 외국 [oreilly] 작은 프로그램(문자 추측):

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

로그인 후 복사

위 내용은 html5 Canvas의 기본 기능에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.