Pictures_javascript 기술을 사용하여 간단한 드로잉 보드를 만드는 html5 javascript

사진 보기:



코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

🎜>




;
<script> <br><br>var c;//얻은 2D 작화판<BR>var painting = false;//채색이 진행 중인지, 즉 마우스 왼쪽 버튼이 눌렸는지 확인 길게 누름<BR> var canvas;//Artboard<br>$(function(){ <br><BR>$(".eraseSeries").hide();//초기 상태 라디오 버튼 그룹이 숨겨집니다<BR> <BR>canvas= document.getElementById("myCanvas"); <br>c=canvas.getContext("2d"); <br>c.lineCap="round";//손글씨의 모서리를 설정합니다. 손글씨 깨짐<br>c .StrokeStyle="black";//손글씨 색상<br>c.lineWidth=5;//글씨 굵기<BR>$("#color").change (function(){//손글씨 색이 변할 때 <BR>if(eraseFlag==true)//지우기 상태에서<BR>{ <BR>$("#erase").trigger("click" );//브러쉬 상태로 돌아가기 위해 지우개의 클릭 이벤트를 자동으로 트리거합니다<BR>} <BR>c.StrokeStyle=$(this).val();//브러쉬 상태 설정<BR>c.lineWidth=$ (this).val(); <BR><BR> }); <BR><BR>$("#fontSize").change(function(){//브러시 두께가 변경됨<br>if(eraseFlag= =true)//위와 동일<br>{ <br>$ ("#erase").trigger("click") <br>} <BR>c.lineWidth=$(this).val(); <BR>c.StrokeStyle=$("#color").val (); <BR>//eraseFlag=false; <BR>}) <BR><BR>$(".eraseSeries").click( function(){//지우개 크기가 변경됩니다<BR>var size= $('input[name="eraseSize"]:checked').val();//지우개 라디오 버튼 그룹의 선택된 값을 가져옵니다<BR>sizeE=size;//전역 변수에 값을 전송합니다. 지우개 스타일의 위치를 ​​제어하려면 sizeE를 사용해야 합니다. <br>c.lineWidth=size; <br>$("#eraseImg").css( {"width" :size "px","height":size "px"} );//지우개 스타일의 크기가 변경됩니다<BR>}) <BR><BR>$("#erase"). ggle(function(){//고무버튼 클릭 반전 이벤트<BR>c.save( );//마지막 설정 상태 유지 <BR>eraseFlag=true; <br>c.StrokeStyle="white"; <br><BR>$("#erase").text("Brush");/ /버튼의 텍스트 변경<BR>$(".eraseSeries").show('fast');//Eraser 라디오 그룹이 나타납니다<BR>// $("#eraseImg").show(); <br>sizeE=5 <br><BR><BR>},function(){ <BR>eraseFlag=false; 🎜>$("#erase").text("Eraser"); <br>$( ".eraseSeries").hide('fast') <br>c.restore();//마지막 브러시 복원 상태(색상, 두께 등 포함) <BR>}) <BR><BR><BR>//setInterval(paint,2) <BR><BR>var p_x;//마지막 마우스 위치<br>var p_y; <br>var p_x_now;//현재 순간 마우스 위치<BR>var p_y_now <br>var eraFlag=false; 🎜><br>$(document).mousedown(function(e){//마우스 누름 트리거 이벤트<br><br><BR>// Alert(sizeE); <BR>p_x= e.clientX;// 위치를 가져와 마지막 마우스 위치로 설정<BR>painting = true;//브러시 시작 플래그<BR><BR>}) <br>$(document).mousemove (function(e){//마우스 이동 트리거 이벤트<br>if(eraseFlag==true&& e .clientY>30)//지우개가 활성화되어 있고 마우스 Y의 위치가 30보다 큽니다. 마우스가 작업판에 있습니다<br>{ <br><BR>//지우개 이미지가 마우스와 함께 움직입니다<BR>$( "#eraseImg").animate({left: e.clientX-sizeE "px", top: e.clientY-sizeE "px"},0).show('fast'); <BR>} <BR>else <br>{ <br>$("#eraseImg").hide('fast' ); <BR>} <BR>if(painting==true)//브러시가 활성화되었습니다. <BR>{ <br>/ /alert(1) <br>p_x_now= e.clientX;//마우스 위치 현재<BR>p_y_now= e.clientY; <BR>c.beginPath();//시작 경로<BR>//Curve 매우 작은 직선으로 구성되어 있으며 컴퓨터 작동 속도가 매우 빠릅니다. 직선으로 곡선을 반복적으로 그리는 방법입니다<BR>c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop) ;//시작점으로 이동<BR>c.lineTo(p_x_now -5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//시작점에서 끝점까지 직선을 그립니다.<BR><BR>c.Stroke( ) <BR>c.closePath() ;//닫힌 경로, 이는 매우 중요합니다. 경로가 닫히지 않은 경우 <BR>// 캔버스 색상이 변경되는 한 이전에 칠해진 모든 색상이 변경됩니다 <BR> p_x = p_x_now;//1회 반복 후 , 현재 순간 좌표 값이 마지막 마우스 좌표 값에 할당됩니다. <BR>p_y = p_y_now <BR>} <BR><BR>}) <BR><br>$( document).mouseup(function(e) ){//마우스 떼기 트리거 이벤트<br><BR>painting=false;//브러시 고정<BR>}); <br><br></script>

红color
黄color
蓝color
黑color
绿color



5
10
15
20
30

擦皮

5
10
15
20
30