Graffiti Board는 Html5로 자신만의 드로잉 보드를 작성하기 위해 간단하게 구현되었습니다.-H5 튜토리얼-php.cn

Graffiti Board는 Html5로 자신만의 드로잉 보드를 작성하기 위해 간단하게 구현되었습니다.

巴扎黑

풀어 주다： 2017-05-21 14:46:40

원래의

4367명이 탐색했습니다.

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

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

HTML5 드로잉은 점, 선, 표면, 원, 그림 등, 점과 선, 이 두 가지가 있으면 그릴 수 없는 것이 없고, 예상치 못한 알고리즘이 있을 뿐입니다.

코드부터 시작해 보겠습니다.

html

XML/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>

로그인 후 복사

효과:

좋아, 간단한 그리기 인터페이스가 준비되었습니다. 선 그리기 코드 작성을 시작하겠습니다

JavaScript 코드클립보드에 콘텐츠 복사

$.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();   
}     
})

로그인 후 복사

여기서의 간단한 코드는 누구나 이해할 수 있다고 믿습니다. 가장 중요한 것은 캔버스 생성을 포함하여 개체를 생성하는 것입니다. , 2D 객체 생성, 원 그리기 방법 및 객체 초기화 방법.

이 개체/p를 호출하는 첫 번째 HTML 페이지 옆에 있습니다>

코드를 살펴보세요:

JavaScript 코드내용 복사 클립보드에

var color = "#000000";//初始化颜色   
 var size = 5;//初始化尺寸   
document.getElementById(&#39;color1&#39;).onchange = function () {   
color = this.value;   
 };   
 document.getElementById(&#39;size&#39;).onchange = function () {   
 size = this.value;   
 };   
 $.Draw.init();//初始化   
 var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用   
  var current = {};//存储鼠标按下时候的点   
document.onmousedown = function (option) {//鼠标按下事件   
 current.x = option.x;   
current.y = option.y;   
 $.Draw.Cricle(option.x, option.y, size, color);   
 tag = true;   
 }   
 document.onmouseup = function () {//鼠标抬起事件   
 tag = false;   
 }   
document.onmousemove = function (option) {//鼠标移动事件   
 if (tag) {   
 if (size >= 0) {   
 $.Draw.Cricle(option.x, option.y, size, color);   
  }    
 }   
 }

로그인 후 복사

이 코드는 주로 다음과 같은 의미를 가집니다

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

2. 그리기 개체 초기화

3. 마우스 누르기, 떼기 및 이동 이벤트를 캡처하는 것이 핵심입니다. 잉크

알겠습니다. 간단한 그래피티 보드에 제 캘리그라피를 적어주시면 됩니다.