집 >웹 프론트엔드 >H5 튜토리얼 >html5 캔버스 간단한 드로잉 보드 구현 code_html5 튜토리얼 기술

html5 캔버스 간단한 드로잉 보드 구현 code_html5 튜토리얼 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의: 2016-05-16 15:51:131350검색

렌더링:

참고: 다음 코드를 실행하려면 HTML5를 지원하는 브라우저에서 실행하여 효과를 확인하세요.

<!doctype html> 
<html> 
<머리> 
<title>canvas简单画板</title> 
<스타일 유형="텍스트/css"> 
#수{너비:600px; 높이:500px; 테두리:1px 솔리드 #ccc; 여백 상단:0px; 여백-왼쪽:20px;} 
</스타일> 
</머리> 
<본문> 
<h2 style="padding-left:20px">canvas简单画板</h2> 
<canvas id="can" width="600" height="500"></canvas> 
<스크립트 유형="텍스트/자바스크립트"> 
함수 getBodyOffsetTop(el){ 
var 상단 = 0; 
하다{ 
상단 = 상단 el.offsetTop; 
}while(el = el.offsetParent); 
상단으로 돌아가기; 
} 
함수 getBodyOffsetLeft(el){ 
var 왼쪽 = 0; 
하다{ 
왼쪽 = 왼쪽 el.offsetLeft; 
}while(el = el.offsetParent); 
왼쪽으로 돌아가십시오. 
} 
함수 그리기(캔버스,옵션){ 
typeof canvas == 'string' && (canvas = document.getElementById(canvas)); 
if(!canvas || !canvas.getContext){ 
throw new Error(100,'캔버스를 지원하지 않습니다!'); 
} 
this.옵션 = { 
색상:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] 
}; 
this.setOption(옵션); 
this.init(캔버스); 
} 
Drawing.prototype = { 
setOption:함수(옵션){ 
옵션 유형 == '객체' || (옵션 = {}); 
for(옵션의 var i){ 
스위치(i){ 
'색상'의 경우: 
this.option[i] = 옵션[i]; 
부서지다; 
} 
} 
}, 
초기화:함수(캔버스){ 
this.canvas = 캔버스; 
this.context = canvas.getContext('2d'); 
this.context.lineWidth = 1; 
this.context.lineJons = '라운드'; 
this.context.lineCep = '라운드'; 
this.isButtonDown = 거짓; 
this.historyStroker = []; 
this.curStroker = {색상:'#000000',경로:[]}; 
this.lastX = 0; 
this.lastY = 0; 
this.curColor = '#000000'; 
this.toolbarspos ={}; 
this.bindEvent(); 
this.ResetDrawToolbar(); 
}, 
바인드이벤트:함수(){ 
var 자기 = 이것; 
this.canvas.addEventListener('mousemove',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseMove({x:x,y:y}); 
},거짓); 
this.canvas.addEventListener('mousedown',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseDown(event,{x:x,y:y}); 
},거짓); 
this.canvas.addEventListener('mouseup',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onMouseUp(event,{x:x,y:y}); 
},거짓); 
this.canvas.addEventListener('click',function(event){ 
var x = event.pageX-getBodyOffsetLeft(this), 
y = event.pageY-getBodyOffsetTop(this); 
self.onClick({x:x,y:y}); 
},거짓); 
}, 
onMouseMove:함수(pos){ 
if(this.isButtonDown){ 
var p = this.toolbarspos; 
for(var i in p){ 
if(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
반품; 
} 
} 
this.context.lineTo(pos.x,pos.y); 
this.context.Stroke(); 
this.lastX = pos.x; 
this.lastY = pos.y; 
this.curStroker.path.push(pos); 
} 
}, 
onMouseDown:함수(이벤트,위치){ 
if(event.button == 0){ 
var p = this.toolbarspos; 
for(var i in p){ 
if(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
반품; 
} 
} 
this.isButtonDown = true; 
this.lastX = pos.x; 
this.lastY = pos.y; 
this.context.beginPath(); 
this.context.moveTo(this.lastX,this.lastY); 
this.curStroker.color = this.curColor; 
this.curStroker.path.push(pos); 
} 
}, 
onMouseUp:함수(이벤트,위치){ 
if(event.button == 0){ 
var p = this.toolbarspos; 
for(var i in p){ 
if(pos.x >= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
반품; 
} 
} 
this.isButtonDown = 거짓; 
this.historyStroker.push(this.curStroker); 
this.curStroker = {color:this.curColor,path:[]}; 
} 
}, 
ResetDrawAll:함수(){ 
this.context.clearRect(0,0,500,500); 
this.ResetDrawCentre(); 
this.ResetDrawToolbar(); 
}, 
ResetDrawCentre:함수(){ 
var p = this.historyStroker,p2, 
curColor = this.context.StrokeStyle; 
for(var i=0; i< p.length;i ){ 
this.context.StrokeStyle = p[i].color; 
this.context.beginPath(); 
for(var t=0; t<p p2="p[i].경로[t];" if this.context.moveto this.context.lineto this.context.stroke this.context.beginpath this.context.strokestyle="curColor;" resetdrawtoolbar:function var curcolor="this.context.fillStyle;" for i="0;" this.context.fillstyle="this.option.colors[i];" this.context.fillrect this.toolbarspos onclick: p="this.toolbarspos;" in>= p[i].x 
&& pos.x <= p[i].x p[i].w 
&& pos.y >= p[i].y 
&& pos.y <= p[i].y p[i].h){ 
this.curColor = this.option.colors[i]; 
this.context.StrokeStyle = this.curColor; 
this.ResetDrawAll(); 
} 
} 
} 
}; 
new Drawing('할 수 있다'); 
</script></body> 
</html> 
</p>

提示：您可以先修改part代码再运行

성명：

이전 기사：HTML5에 대한 22가지 기본 기술(그래픽 튜토리얼)_html5 튜토리얼 기술다음 기사：HTML5에 대한 22가지 기본 기술(그래픽 튜토리얼)_html5 튜토리얼 기술

html5 캔버스 간단한 드로잉 보드 구현 code_html5 튜토리얼 기술

관련 기사