마우스를 사용하여 HTML5 Canvas에서 그리기



Answers

다음은 캔버스를 사용하여 그리기 응용 프로그램을 만드는 가장 직접적인 방법입니다.

  1. mousedown , mousemovemouseup 이벤트 리스너를 캔버스 DOM에 연결
  2. mousedown 에서 마우스 좌표를 가져오고 moveTo() 메서드를 사용하여 드로잉 커서와 beginPath() 메서드가 새로운 드로잉 경로를 시작하도록합니다.
  3. mousemove 에서 lineTo() 를 사용하여 경로에 새 포인트를 계속 추가하고 마지막 세그먼트를 stroke() 로 채 stroke() .
  4. mouseup 에서 드로잉을 비활성화하는 플래그를 설정합니다.

거기에서 사용자는 선 두께, 색상, 브러시 획 및 레이어를 선택할 수있는 기능과 같은 모든 종류의 다른 기능을 추가 할 수 있습니다.

Question

마우스를 사용하여 HTML Canvas에 그려야합니다 (예 : 서명 그리기, 이름 그리기 ...).

어떻게 도와 드릴까요? 일부 소스 코드를 제공하십시오. 고맙습니다




Alco이 항목을 확인하십시오.
예:
https://github.com/williammalone/Simple-HTML5-Drawing-App

선적 서류 비치:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

이 문서에는 다음 코드가 포함됩니다.

HTML :

<canvas id="canvas" width="490" height="220"></canvas>

JS :

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

$('#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();
});

$('#canvas').mouseup(function(e){
  paint = false;
});

$('#canvas').mouseleave(function(e){
  paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

//Also redraw
function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

  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();
  }
}

그리고 또 다른 멋진 예
http://perfectionkills.com/exploring-canvas-drawing-techniques/




제 생각에, 여기에있는 다른 예제들은 너무 복잡합니다. 이건 더 간단하고 JS 만 ...

// create canvas element and append it to document body
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// some hotfixes... ( ≖_≖)
document.body.style.margin = 0;
canvas.style.position = 'fixed';

// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();

// last known position
var pos = { x: 0, y: 0 };

window.addEventListener('resize', resize);
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);

// new position from mouse event
function setPosition(e) {
  pos.x = e.clientX;
  pos.y = e.clientY;
}

// resize canvas
function resize() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

function draw(e) {
  // mouse left button must be pressed
  if (e.buttons !== 1) return;

  ctx.beginPath(); // begin

  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = '#c0392b';

  ctx.moveTo(pos.x, pos.y); // from
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to

  ctx.stroke(); // draw it!
}







Related