최근에 HTML5의 몇 가지 새로운 요소 속성을 연구한 결과, 특히 새로운 태그 요소인 Canvas가 사용하기 매우 쉽다는 사실을 발견했습니다. 공식 소개: Canvas API(캔버스)는 웹 페이지에서 실시간으로 이미지를 생성하는 데 사용되는 HTML5의 새로운 태그이며, 기본적으로 JavaScript로 조작할 수 있는 비트맵입니다. 다음은 Canvas와 결합된 JavaScript를 사용하여 드로잉보드 기능을 구현한 것입니다.
효과 데모 사진:
코드 부분(직접 복사하여 사용)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas는 사용자 정의 드로잉 보드를 구현합니다.</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //검은색 직사각형 그리기 ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //표시 누르기 var onoff = false; //oldx 및 oldy 변수는 마우스가 이동하기 전의 좌표를 나타냅니다. ; var oldy = -10; //색상 설정 var linecolor = white; //선 너비 설정 var linw = 4; //마우스 이동 이벤트 추가 canvas.addEventListener(mousemove,draw,true); //세 번째 매개변수는 주로 캡처 또는 버블링과 관련됩니다. //마우스 누름 이벤트 추가 canvas.addEventListener(mousedown,down,false); up 이벤트 canvas.addEventListener(mouseup,up,false); function down(event){ onoff = true.pageX-10; event.pageY-10; //console.log(event.pageX+'...........000....'+event.pageY) / /event.pageX 및 event.pageY는 오버플로 부분(즉, 스크롤 막대)을 포함한 전체 페이지의 마우스 위치를 기준으로 합니다. } function up(){ onoff = false } function draw(event){ if(onoff; == true) { var newx = event.pageX-10; event.pageY-10; ctx.beginPath();//beginPath() 현재 정의된 경로를 삭제하고 새 경로를 시작합니다. 현재 지점을 (0,0)으로 설정합니다. ctx.moveTo(oldx,oldy); //클릭하면 해당 좌표를 원점으로 하여 이동합니다. ctx.lineTo(newx,newy); //새 경로 그리기 ctx.lineWidth=linw; ; ctx.lineCap=round; ctx.Stroke();//stroke() 메서드는 실제로 moveTo() 및 lineTo() 메서드에 의해 정의된 경로를 그립니다. 기본 색상은 검정색입니다. //다음 그리기 시작 좌표에 새 마우스 위치 지정 oldx = newx = newy };</script></body></html>위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.