HTML5 캔버스 기본 그리기 그래픽 조합-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Feb 23, 2017 pm 01:56 PM

는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다.

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

성명

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

관련 기사

기본 이외 : H5 코드의 고급 기술May 02, 2025 am 12:03 AM

H5에 대한 고급 팁에는 다음이 포함됩니다. 1. 복잡한 그래픽 사용, 2. 웹 워크를 사용하여 성능 향상, 3. WebStorage, 4. 응답 디자인 구현, 5. WebRTC를 사용하여 실시간 커뮤니케이션을 달성하기 위해, 6. 성능 최적화 및 모범 사례를 수행하십시오. 이 팁은 개발자가보다 역동적이고 대화식 및 효율적인 웹 응용 프로그램을 구축 할 수 있도록 도와줍니다.

H5 : 웹 컨텐츠 및 디자인의 미래May 01, 2025 am 12:12 AM

H5 (HTML5)는 새로운 요소와 API를 통해 웹 컨텐츠와 디자인을 개선합니다. 1) H5는 시맨틱 태깅 및 멀티미디어 지원을 향상시킵니다. 2) 웹 디자인을 풍부하게하는 캔버스 및 SVG를 소개합니다. 3) H5는 새로운 태그와 API를 통해 HTML 기능을 확장하여 작동합니다. 4) 기본 사용에는이를 사용하여 그래픽 생성이 포함되며, 고급 사용량은 WebStorageapi와 관련이 있습니다. 5) 개발자는 브라우저 호환성 및 성능 최적화에주의를 기울여야합니다.

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

See all articles