캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

debugcn 에 게시 Dev

user1169526

캔버스가 작동하도록 노력하고 있는데, 제가하려는 것은 이미지 (기존 이미지에서)를 만들고 그 위에 텍스트를 배치하는 것입니다. 이미지 왼쪽에서 텍스트를 회전하고 싶습니다. 텍스트를 회전하려는 순간 캔버스에서 더 이상 볼 수 없습니다. 다음 솔루션을 사용하고 있습니다.

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.save();
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
ctx.restore();
var image = canvas.toDataURL("image/jpeg");

이 솔루션으로 더 이상 텍스트를 볼 수 없습니다. 회전을 삭제하고 코드를 다음과 같이 만들면 모든 것이 잘 작동하고 이미지가 렌더링되고 텍스트가 이미지에 렌더링됩니다.

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
var image = canvas.toDataURL("image/jpeg");

누구든지 내가 저지르는 실수를 볼 수 있습니까, 아니면 누군가가 내 문제에 대한 해결책을 가지고 있습니까?

[편집] 나는 문제를 보여주는 jsfiddle을 만들었다. http://jsfiddle.net/7kzuN/4/

상표

회전하기 전에 항상 회전 점을 설정해야합니다.

회전 지점을 종이에 연필 끝을 눌렀다 고 생각하십시오.

회전하면 종이가 연필 끝을 중심으로 회전합니다.

context.translate (x, y)를 사용하여 회전 지점을 설정합니다.

이미지의 왼쪽에서 회전하려면 다음과 같이 번역합니다.

// set the rotation point

ctx.translate(6,img.height/2);

이렇게하면 회전 지점이 이미지의 왼쪽과 수직 중앙에서 6 픽셀 떨어진 곳에 설정됩니다.

다음은 예제 코드와 데모입니다. http://jsfiddle.net/m1erickson/ANpPm/

여기에 이미지 설명 입력

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/houseIcon.png";
function start(){
    canvas.width=img.width;
    canvas.height=img.height;
    // draw the image
    ctx.drawImage(img,0,0);
    // save the unrotated context
    ctx.save();
    // set the rotation point with translate
    ctx.translate(6,img.height/2);
    // rotate by -90 degrees
    ctx.rotate(-0.5*Math.PI);
    // draw the copyright bar
    ctx.fillStyle="black";
    ctx.fillRect(-img.height/2,-6,img.height,14);
    ctx.font = "12px Arial";
    ctx.fillStyle = 'white';
    ctx.textBaseline = 'top';
    ctx.fillText("copyright", -img.height/2+5,-6);
    // restore the context to its unrotated state
    ctx.restore();
    // save the image+text to a dataURL
    var image = canvas.toDataURL("image/jpeg");

}

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

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

에서 수정2021-05-30

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

캔버스에 이미지를 추가하고 그 위에 회전 된 텍스트를 배치하는 방법은 무엇입니까?

회전 된 텍스트를 이미지 오른쪽에 배치하는 방법

텍스트 블록의 끝에 배치 된 이미지 주위에 텍스트를 배치하는 방법은 무엇입니까?

회전 된 텍스트가 회전 된 div를 따르지 않게하는 방법은 무엇입니까?

WPF에서 그리드 배경 이미지를 회전하는 방법은 무엇입니까?

회전 된 요소를 중앙에 배치하고 상단에 정렬하는 방법은 무엇입니까?

그리드 구조를 깨지 않고 반응 형 크기 조정 텍스트를 이미지 위에 배치하는 방법은 무엇입니까?

이미지로 캔버스에 그릴 때 스트로크 위치를 수정하는 방법은 무엇입니까? typescript Angular 사용

회전 된 캔버스에 고무줄 선택 사각형을 정확하게 그리는 방법은 무엇입니까?

회전 된 캔버스에 고무줄 선택 사각형을 정확하게 그리는 방법은 무엇입니까?

부동 고정 이미지 주위에 텍스트를 배치하는 방법은 무엇입니까?

Slick2D의 중심에서 회전 된 이미지를 그리는 방법은 무엇입니까?

캔버스에서 이미지를 드래그하는 방법은 무엇입니까?

Bootstrap 배경이있는 이미지 위에 텍스트를 추가하는 방법은 무엇입니까?

다트에서 이미지를 회전하는 방법은 무엇입니까?

그림의 다른 위치에 여러 텍스트를 추가하는 방법은 무엇입니까?

Base64 String 형식으로 JSON에서 전달 된 HTML5 캔버스에 이미지를 표시하는 방법은 무엇입니까?

마우스 오버 후 이전 위치에 p 태그를 유지하는 방법은 무엇입니까?

배경에 이미지를 추가하고 그 위에 스크롤 사각형을 추가하는 방법은 무엇입니까?

Android Canvas에서 전체 캔버스를 jpeg 이미지로 저장하는 방법은 무엇입니까?

Codename One에서 iOS 카메라의 회전 된 이미지를 수정하는 방법은 무엇입니까?

버튼 요소의 텍스트 아래에 이미지를 배치하는 방법은 무엇입니까?

JFrame (VLCJ)에 배치 된 비디오를 회전하는 방법은 무엇입니까?

fabricjs 캔버스 이미지를 다른 배경 이미지에 저장하는 방법은 무엇입니까?

Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

Android에서 확장 된보기에 캔버스를 추가하는 방법은 무엇입니까?

Android에서 버튼의 텍스트를 회전하는 방법은 무엇입니까?

캔버스에서 ContentControl을 이동 / 크기 조정 / 회전하는 방법은 무엇입니까?

이미지를 가리킬 때 이미지에 텍스트를 추가하는 방법은 무엇입니까?

p 태그 위에 이미지를 배치하는 방법은 무엇입니까?