집 >웹 프론트엔드 >H5 튜토리얼 >HTML5 캔버스 기본 그리기 그래픽 조합

HTML5 캔버스 기본 그리기 그래픽 조합

黄舟원래의: 2017-02-23 13:56:562432검색

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. 5ba626b379994d53f7acf72a64f9b697> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인 5ba626b379994d53f7acf72a64f9b697 요소에 해당하는 DOM 개체를 가져옵니다. CanvasRenderingContext2D 객체를 가져오는 getContext( Canvas 객체의) 메소드
3. 그리기를 위해 CanvasRenderingContext2D 객체를 호출합니다.

그래픽 조합:

•globalAlpha: 도면의 현재 알파 또는 투명도 값을 설정하거나 반환합니다.
이 방법은 주로 투명도를 설정하는 데 사용됩니다. 그래프이므로 여기서는 자세히 소개하지 않겠습니다.

•globalCompositeOperation: 기존 이미지에 새 이미지를 그리는 방법을 설정하거나 반환합니다. 이 메서드에는 다음과 같은 속성 값이 있습니다.

HTML5 캔버스 기본 그리기 그래픽 조합
다음은 작은 예입니다. 클릭하여 조합 효과를 변경할 수 있습니다.

<!DOCTYPE html>  

    <html lang="en">  

    <head>  

        <meta charset="UTF-8">  

        <title>图形组合</title>  

        <style type="text/css">  

            #canvas{   

                border: 1px solid #1C0EFA;   

                display: block;   

                margin: 20px auto;   

            }   

            #buttons{   

                width: 1000px;   

                margin: 5px auto;   

                clear:both;   

            }   

            #buttons a{   

                font-size: 18px;   

                display: block;   

                float: left;   

                margin-left: 20px;   

            }   

        </style>  

    </head>  

    <body>  

        <canvas id="canvas" width="1000" height="800">  

                你的浏览器还不支持canvas   

        </canvas>  

        <p id="buttons">  

            <a href="#">source-over</a>  

            <a href="#">source-atop</a>  

            <a href="#">source-in</a>  

            <a href="#">source-out</a>  

            <a href="#">destination-over</a>  

            <a href="#">destination-atop</a>  

            <a href="#">destination-in</a>  

            <a href="#">destination-out</a>  

            <a href="#">lighter</a>  

            <a href="#">copy</a>  

            <a href="#">xor</a>  

        </p>  

    </body>  

    <script type="text/javascript">  

      

    window.onload = function(){   

        draw("source-over");   

      

        var buttons = document.getElementById("buttons").getElementsByTagName("a");   

        for (var i = 0; i < buttons.length; i++) {   

            buttons[i].onclick = function(){   

                draw(this.text);   

                return false;   

            };   

        }   

    };   

      

        function draw(compositeStyle){   

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

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

      

            context.clearRect(0, 0, canvas.width, canvas.height);   

      

            //draw title   

            context.font = "bold 40px Arial";   

            context.textAlign = "center";   

            context.textBasedline = "middle";   

            context.fillStyle = "#150E0E";   

            context.fillText("globalCompositeOperation = "+compositeStyle, canvas.width/2, 60);   

      

            //draw a rect   

            context.fillStyle = "#F6082A";   

            context.fillRect(300, 150, 500, 500);   

      

            //draw a triangle   

            context.globalCompositeOperation = compositeStyle;   

            context.fillStyle = "#1611F5";   

            context.beginPath();   

            context.moveTo(700, 250);   

            context.lineTo(1000,750);   

            context.lineTo(400, 750);   

            context.closePath();   

            context.fill();   

        }   

      

    </script>  

    </html>

독자는 라벨을 클릭하여 다양한 조합 효과를 관찰할 수 있습니다. 효과는 다음과 같습니다.

HTML5 캔버스 기본 그리기 그래픽 조합

위 내용은 기본 HTML5 캔버스 그리기의 그래픽 조합 내용입니다. PHP 중국어 홈페이지(www.php.cn)!

성명：

이전 기사：HTML5 Canvas를 사용한 멋진 큰 파도 진행 차트 효과의 예(데모 포함)다음 기사：HTML5 Canvas를 사용한 멋진 큰 파도 진행 차트 효과의 예(데모 포함)

HTML5 캔버스 기본 그리기 그래픽 조합

관련 기사