마우스 클릭으로 캔버스로 그리기가 꺼짐

Question

내 <canvas> 요소가 100vw 및 100vh이됩니다. 나는 그것의 아무 곳이나 클릭하고 그곳에 그림을 그릴 수 있기를 원합니다. 지금은 화면을 클릭 할 때 이미지가 클릭 한 곳 가까이에 그려지지 않습니다. 왼쪽 상단을 클릭할수록 가까워집니다. 그러나 제가 약간 구석에서 벗어나면, 이미지는 정말로 멀리 아래쪽으로 밀려납니다.

내가 클릭 한 위치에서 이미지를 정확히 그려야하는 것처럼 보이는 오프셋을 어떻게 계산할 수 있습니까? CSS와 캔버스 크기 조정

는

//var count1 = (Math.floor(Math.random() * screen.width)) + 1; 
 
//var count2 = (Math.floor(Math.random() * screen.height)) + 1; 
 

 
function onCanvasClick() { 
 
    var image = document.getElementById("image"); 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    var loc = "xLoc is: " + xLoc + " | yLoc is: " + yLoc; 
 
    console.log(loc); 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

#myCanvas { 
 
    width: 99vw; 
 
    height: 99vh; 
 
    border: 2px solid rgba(255, 255, 255, 0.5); 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 

 
#image { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/100/100/abstract/5/"></img>

Answer 1

어떻게 <img> 동작합니다과 유사한 내용을 뻗어.
스트레칭은 마우스 클릭에 상대적으로 캔버스 좌표를 상쇄합니다.
예를 들어 좌표 (5,5)에서의 클릭은 (15,25)의 늘린 캔버스 좌표로 변환 될 수 있습니다.

Sizing the canvas
캔버스의 표시 사이즈는 스타일 시트를 이용하여 변경 될 수있다. 스타일에 맞게 이미지를 렌더링하는 동안 크기가 조절됩니다. 렌더링이 왜곡 된 것처럼 보이는 경우 속성에 너비와 높이 속성 을 명시 적으로 지정하고 CSS를 사용하지 않는 을 지정하십시오.

JavaScript를 통해 캔버스 크기를 설정하여 뷰포트를 채울 수 있습니다.

var image = document.getElementById("image"); 
 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 

 
c.width = window.innerWidth; 
 
c.height = window.innerHeight; 
 

 
function onCanvasClick() { 
 
    var xLoc = event.clientX; 
 
    var yLoc = event.clientY; 
 
    ctx.drawImage(image, xLoc, yLoc); 
 
}

body { 
 
    margin: 0; 
 
} 
 
#myCanvas { 
 
    display: block; 
 
    background-color: rgba(58, 154, 221, 0.3); 
 
} 
 
#image { 
 
    display: none; 
 
}

<canvas id="myCanvas" onmousedown="onCanvasClick()" width="100%" height="100%">You dont support this!</canvas> 
 
<img id="image" src="//lorempixel.com/50/50/abstract/5/"></img>

더 참고, 참조 :
HTML5 Canvas distorted?
Resize HTML5 canvas to fit window
HTML5 Canvas 100% Width Height of Viewport?

---

크기 조정 캔버스을 취소합니다, 그래서 반응 디자인 추가 functionalit이 필요합니다 와이.
Matthew Crumley has ideas 크기를 조정할 때 기존 내용을 다시 그리거나 크기를 조정합니다.