HTML5 캔버스와 JavaScript를 사용하여 그리기 프로그램을 만드는 샘플 코드

다음 편집기는 html5의 canvas와 JavaScript를 사용하여 그리기 프로그램을 만드는 간단한 예를 보여줍니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터를 따라가며 살펴보겠습니다

이 글에서는 캔버스와 자바스크립트를 사용하여 간단한 그리기 프로그램을 만드는 방법을 안내하겠습니다.

먼저 컨테이너 Canvas 요소를 준비하면 모든 작업이 JavaScript로 수행됩니다.

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

그리기 환경을 가져오고 컨텍스트 개체는 캔버스에 그리기 위한 메서드와 속성을 제공합니다

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

그리기 프로세스 시작

먼저 그리기 경로 점의 좌표를 저장해야 합니다. addClick 함수는 좌표 점 값을 배열에 추가합니다.

var clickX = new Array();   
var clickY = new Array();   
var clickDrag = new Array();//存储路径点 
var paint;//是否绘制，mousedown时置为true 
function addClick(x, y, dragging)   
{   
  clickX.push(x);   
  clickY.push(y);   
  clickDrag.push(dragging);   
}

다시 그리기 함수는 매번 전체 캔버스를 다시 그립니다. 그것은 불린다. 먼저 캔버스의 내용을 지우고 선 색상, 굵기, 선 연결 방법을 설정합니다. 그런 다음

두 점 사이에 경로를 그리고 배열의 좌표점을 순서대로 그립니다

function redraw(){   
  context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除画布内容   
  context.strokeStyle = "#df4b26";//设置线条颜色   
  context.lineJoin = "round";//当两条线条交汇时，创建圆形边角   
  context.lineWidth = 5;//线条粗细   
  for(var i=0; i < clickX.length; i++) {           
    context.beginPath();//开始一条路径，或重置当前的路径   
    if(clickDrag[i] && i){   
      context.moveTo(clickX[i-1], clickY[i-1]);   
     }else{   
       context.moveTo(clickX[i]-1, clickY[i]);   
     }   
     context.lineTo(clickX[i], clickY[i]);   
     context.closePath();   
     context.stroke();//绘制路径   
  }   
}

그리는 과정에 필요한 이벤트

1개의 mousedown 이벤트

그림이 캔버스를 클릭하면 이 이벤트가 실행되어 실행됩니다. addClick 함수가 호출되고 페인트가 true로 설정됩니다.

아아아앙

• 
  

2 mousemove 이벤트

mousedown에 설정된 페인트가 true인 후 마우스가 움직일 때 mousemove 이벤트 실행이 트리거되고 마우스로 이동한 모든 포인트가 기록되며 다시 그리기 위해 redraw가 계속 호출됩니다. 캔버스.

$('#canvas').mousedown(function(e){   
  var mouseX = e.pageX - this.offsetLeft;   
  var mouseY = e.pageY - this.offsetTop;   
  paint = true;   
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);   
  redraw();   
});

3 mouseup 이벤트

mouseup 마우스를 클릭하고 놓거나 드래그하고 놓으면 경로가 그려졌음을 나타냅니다. 거짓으로.

$('#canvas').mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });

4개의 mouseleave 이벤트

mouseleave 마우스는 캔버스 요소를 떠나 페인트를 false로 설정합니다.

아아아아

위 내용은 HTML5 캔버스와 JavaScript를 사용하여 그리기 프로그램을 만드는 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!