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 선택됨>5
<옵션 값=10>10
<옵션 값=15>15
<옵션 값=20>20
<옵션 값=30>30

擦皮

5
10
15
20
30