HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.-H5 튜토리얼-php.cn

HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.

黄舟

풀어 주다： 2017-03-16 13:17:32

원래의

3744명이 탐색했습니다.

이 기사에서는 HTML5를 사용하여 자신만의 드로잉 보드 작성, 페인팅, 색상 조정 및 기타 작업을 수행하는 방법을 주로 설명합니다. 관심 있는 친구들은

최근에 배운 HTML5의 강력한 그리기 기능에 놀랐습니다. 그래서 저는 그리기, 색상 변경, 브러시 크기 조정과 같은 기능을 수행할 수 있는 그래피티 패드라는 가젯을 작성했습니다.

HTML5 드로잉은 점, 선, 표면, 원으로 나눌 수 있습니다. , 그림 등, 점과 선, 이것이 모든 평면 효과의 기본 포인트입니다. 이 두 가지를 사용하면 그릴 수 없는 것이 없고 예상치 못한 알고리즘만 있을 뿐입니다.

먼저 코드:

html

<body style="cursor:pointer">  
 <canvas id="mycavas" width="1024" height="400" style="border:solid 4px #000000"></canvas><!--画布-->  
        <input type="color" id="color1" name="color1"/><!--设色器-->  
        <output name="a" for="color1" onforminput="innerHTML=color1.value"></output>  
         <input type="range" name="points" id="size" min="5" max="20" /><!--拖动条-->  
</body>

로그인 후 복사

효과:

HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.

알겠습니다. 간단한 그리기 인터페이스가 준비되었습니다.

rree

여기서는 누구나 쉽게 이해할 수 있을 거라 믿습니다. 주로 캔버스 만들기, 2D 만들기 등을 포함합니다. 및 객체 초기화 방법.

다음으로 전면 HTML 페이지로 가서 이 object/p를 호출하세요>

코드를 보세요:

$.Draw = {};   
$.extend($.Draw, {   
    D2: "",   
    CX:"",   
    Box: "mycavas",//画布id   
    BoxObj:function(){//画布对象   
        this.CX=document.getElementById(this.Box);   
    },   
    D2:function(){//2d绘图对象   
       this.D2 = this.CX.getContext("2d");   
    },   
    Cricle: function (x, y, r, color) {//画圆   
        if (this.D2) {   
            this.D2.beginPath();   
            this.D2.arc(x, y, r, 0, Math.PI * 2, true);   
            this.D2.closePath();   
            if (color) {   
                this.D2.fillStyle = color;   
            }   
            this.D2.fill();   
        }   
    },   
    init: function () {//初始化   
        this.BoxObj();   
        this.D2();   
    }   
  
})

로그인 후 복사

이 코드는 주로 다음과 같은 의미를 가지고 있습니다

1. 색상 공간 및 드래그 바 컨트롤의 변경 이벤트를 캡처하여 해당 색상 및 크기 값을 얻고 다음 선 그리기를 위해 저장합니다

2. 개체

3. 마우스 누르기, 떼기, 이동 이벤트를 캡처하세요. 핵심은 스위치로 잉크를 제어하는 것입니다

알겠습니다. 간단한 그래피티 패드이면 충분합니다. :

HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.