HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.
- 黄舟원래의
- 2017-03-16 13:17:323767검색
이 기사에서는 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>효과:
알겠습니다. 간단한 그리기 인터페이스가 준비되었습니다.
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. 마우스 누르기, 떼기, 이동 이벤트를 캡처하세요. 핵심은 스위치로 잉크를 제어하는 것입니다
알겠습니다. 간단한 그래피티 패드이면 충분합니다. :
관련글:
순수한 CSS3 기반의 손으로 그린 그래피티 버튼 효과 6개
html5 사용법 CSS3로 구글 그래피티 애니메이션 완성
자바스크립트 html5 캔버스 기반으로 브러시 색상/두께/고무 조정 가능한 그래피티 보드 구현
위 내용은 HTML5는 단순히 그래피티 보드의 샘플 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!