커서를 사용하여 캔버스를 지우는 방법

FS

웹 페이지에 반응 형 캔버스를 추가하고 싶습니다. 이것은 단지 검은 색 div이며 커서로 지울 수 있어야합니다.

div 2 (텍스트) 위에 Div 1 (캔버스). 커서는 div 1을 지우고 div 2를 표시해야합니다.

최신 정보

이 코드를 사용하고 있지만 작동하지 않습니다.

var canvas = document.getElementById("canvasTop");
var ctx = canvas.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.fillStyle = "skyblue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

var canvasOffset = $("#canvasTop").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    ctx.save();
    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
    startX = mouseX;
    startY = mouseY;
}

$("#canvasTop").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvasTop").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvasTop").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvasTop").mouseout(function (e) {
    handleMouseOut(e);
});
html, body {height:100%}
body {
  margin:0; padding:0;
}
#wrapper {
  position:relative; 
  margin:auto; 
  width:100%; 
  height:100%; 
  background-color:#ffffff
}
#canvasTop {
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%; 
  height:100%;
}
#text {
  position:absolute; 
  left:0; 
  right:0; 
  margin-left:auto; 
  margin-right:auto; 
  width:400px; 
  height:200px; 
  text-align:center; 
  top: 50%; 
  transform:translateY(-50%); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <canvas id="canvasTop" width=100% height=100%></canvas>
    <div id="text">
    <p> Text Text Text Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text Text Text Text</p>
   </div>
</div>

누구든지 도울 수 있기를 바랍니다!

감사

상표

이러한 코드 변경은 "긁힘 제거"효과를 생성합니다.

  • #canvasTop 앞으로 #text 이동
  • CSS를 사용하여 캔버스 크기를 변경하지 마십시오. 그렇게하면 캔버스가 왜곡됩니다.
  • 캔버스 요소의 너비와 높이를 #wrapper의 너비와 높이와 동일하게 설정합니다.

다음은 주석이 달린 변경 사항이있는 리팩토링 된 코드입니다.

var canvas = document.getElementById("canvasTop");
// set the canvas element's width/height to cover #wrapper
var wrapper=document.getElementById('wrapper');
var wrapperStyle=window.getComputedStyle(wrapper,null);
canvas.width=parseInt(wrapperStyle.getPropertyValue("width"));
canvas.height=parseInt(wrapperStyle.getPropertyValue("height"));
//
var ctx = canvas.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.fillStyle = "skyblue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // set "erase" compositing once at start of app for better performance
    ctx.globalCompositeOperation = "destination-out";

var canvasOffset = $("#canvasTop").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var isDown = false;

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    isDown = false;
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mousemove stuff here
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
    startX = mouseX;
    startY = mouseY;
}

$("#canvasTop").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvasTop").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvasTop").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvasTop").mouseout(function (e) {
    handleMouseOut(e);
});
html, body {height:100%}
body { margin:0; padding:0; }
#wrapper {
  position:relative; 
  margin:auto; 
  width:100%; 
  height:100%; 
  background-color:#ffffff;
}
#canvasTop {
  position:absolute; 
  top:0px; 
  left:0px; 
}
#text {
  position:absolute; 
  left:0; 
  right:0; 
  margin-left:auto; 
  margin-right:auto; 
  width:400px; 
  height:200px; 
  text-align:center; 
  top: 50%; 
  transform:translateY(-50%); 
}
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag the mouse over center to "scratch-off" reveal</h4>
<div id="wrapper">
  <!-- move #text before #canvasTop -->
  <div id="text">
    <p> Text Text Text Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text</p>
    <p> Text Text Text Text Text Text Text Text Text</p>
  </div>
  <canvas id="canvasTop" width=512 height=512></canvas>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

캔버스를 사용하여 그림을 그리는 방법

분류에서Dev

Toplevel () Tkinter에서 캔버스를 사용하여 버튼을 만드는 방법

분류에서Dev

HTML5 jquery를 사용하여 마우스 위치에서 캔버스에 요소를 놓는 방법

분류에서Dev

Android에서 캔버스를 사용하여 연동 원을 그리는 방법

분류에서Dev

Kivy, 캔버스에서 데이터를 사용하는 방법

분류에서Dev

버튼을 사용하여 Fabric.js 캔버스에서 이미지를 제거하는 방법

분류에서Dev

HTML5 캔버스를 사용하여 도로 선을 만드는 방법

분류에서Dev

matplotlib : 캔버스 경계에 마커를 표시하는 방법

분류에서Dev

kinetic js를 사용하여 캔버스에서 이미지를 바꾸는 방법

분류에서Dev

Fabricjs-마우스 이동시 캔버스를 감지하는 방법?

분류에서Dev

캔버스를 사용하여 이미지 크기를 동시에 조정하고 회전하는 방법

분류에서Dev

파일 브라우저에서 얻은 경로를 사용하여 tkinter의 캔버스 객체에 이미지를 표시하는 방법

분류에서Dev

toDataURL을 사용하여 캔버스에서 이미지를 PHP로 보내는 방법

분류에서Dev

슬라이더를 사용하여 HTML에서 캔버스 브러시 크기를 변경하는 방법

분류에서Dev

Javascript를 사용하여 X 축에서 캔버스 요소를 회전하는 방법

분류에서Dev

fabricjs에 포함 된 이미지 base64를 사용하여 캔버스를 SVG로 변환하는 방법

분류에서Dev

JavaScript를 사용하여 캔버스 끝을 칠 때 개체를 중지하는 방법은 무엇입니까?

분류에서Dev

스캐너 스캔 버튼으로 문서를 스캔하는 방법

분류에서Dev

Python 3.8을 사용하여 Tkinter에서 캔버스에 스크롤바를 만드는 방법

분류에서Dev

CSS를 사용하여 HTML5 캔버스에 색상을 지정하는 방법이 있습니까?

분류에서Dev

typescript를 사용하여 캔버스 HTML에서 육각형을 변환하는 방법

분류에서Dev

Xamarin Android, 캔버스보기를 추가하여 사용자 서명을 캡처하는 방법

분류에서Dev

캔버스 커서 클릭 좌표를 얻는 방법

분류에서Dev

키보드를 사용하여 캔버스 상자를 회전하는 방법은 무엇입니까?

분류에서Dev

HTML5 캔버스 태그를 사용하여 비디오를 표시하는 방법

분류에서Dev

jquery javascript를 사용하여 캔버스에 텍스트 영역을 추가하는 방법

분류에서Dev

배경 이미지를 캔버스로 설정하는 방법

분류에서Dev

Qt에서 QGeopath를 사용하여 Mappolyline을 지우는 방법

분류에서Dev

itext pdf를 사용하여 PDF 캔버스에 경로를 그리는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    캔버스를 사용하여 그림을 그리는 방법

  2. 2

    Toplevel () Tkinter에서 캔버스를 사용하여 버튼을 만드는 방법

  3. 3

    HTML5 jquery를 사용하여 마우스 위치에서 캔버스에 요소를 놓는 방법

  4. 4

    Android에서 캔버스를 사용하여 연동 원을 그리는 방법

  5. 5

    Kivy, 캔버스에서 데이터를 사용하는 방법

  6. 6

    버튼을 사용하여 Fabric.js 캔버스에서 이미지를 제거하는 방법

  7. 7

    HTML5 캔버스를 사용하여 도로 선을 만드는 방법

  8. 8

    matplotlib : 캔버스 경계에 마커를 표시하는 방법

  9. 9

    kinetic js를 사용하여 캔버스에서 이미지를 바꾸는 방법

  10. 10

    Fabricjs-마우스 이동시 캔버스를 감지하는 방법?

  11. 11

    캔버스를 사용하여 이미지 크기를 동시에 조정하고 회전하는 방법

  12. 12

    파일 브라우저에서 얻은 경로를 사용하여 tkinter의 캔버스 객체에 이미지를 표시하는 방법

  13. 13

    toDataURL을 사용하여 캔버스에서 이미지를 PHP로 보내는 방법

  14. 14

    슬라이더를 사용하여 HTML에서 캔버스 브러시 크기를 변경하는 방법

  15. 15

    Javascript를 사용하여 X 축에서 캔버스 요소를 회전하는 방법

  16. 16

    fabricjs에 포함 된 이미지 base64를 사용하여 캔버스를 SVG로 변환하는 방법

  17. 17

    JavaScript를 사용하여 캔버스 끝을 칠 때 개체를 중지하는 방법은 무엇입니까?

  18. 18

    스캐너 스캔 버튼으로 문서를 스캔하는 방법

  19. 19

    Python 3.8을 사용하여 Tkinter에서 캔버스에 스크롤바를 만드는 방법

  20. 20

    CSS를 사용하여 HTML5 캔버스에 색상을 지정하는 방법이 있습니까?

  21. 21

    typescript를 사용하여 캔버스 HTML에서 육각형을 변환하는 방법

  22. 22

    Xamarin Android, 캔버스보기를 추가하여 사용자 서명을 캡처하는 방법

  23. 23

    캔버스 커서 클릭 좌표를 얻는 방법

  24. 24

    키보드를 사용하여 캔버스 상자를 회전하는 방법은 무엇입니까?

  25. 25

    HTML5 캔버스 태그를 사용하여 비디오를 표시하는 방법

  26. 26

    jquery javascript를 사용하여 캔버스에 텍스트 영역을 추가하는 방법

  27. 27

    배경 이미지를 캔버스로 설정하는 방법

  28. 28

    Qt에서 QGeopath를 사용하여 Mappolyline을 지우는 방법

  29. 29

    itext pdf를 사용하여 PDF 캔버스에 경로를 그리는 방법은 무엇입니까?

뜨겁다태그

보관