Graffiti Board는 Html5로 자신만의 드로잉 보드를 작성하기 위해 간단하게 구현되었습니다.
- 巴扎黑원래의
- 2017-05-21 14:46:404363검색
이 기사에서는 주로 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('color1').onchange = function () {
color = this.value;
};
document.getElementById('size').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. 마우스 누르기, 떼기 및 이동 이벤트를 캡처하는 것이 핵심입니다. 잉크
알겠습니다. 간단한 그래피티 보드에 제 캘리그라피를 적어주시면 됩니다.
위 내용은 Graffiti Board는 Html5로 자신만의 드로잉 보드를 작성하기 위해 간단하게 구현되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!