Pictures_javascript 기술을 사용하여 간단한 드로잉 보드를 만드는 html5 javascript-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:51 PM

html5 화판

사진 보기:

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

코드는 다음과 같습니다.

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

🎜>

간단한 그림판

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

<본문>