홈>
HTML5 캔버스를 사용하는 코드를 작성 중입니다. 일반적으로 잘 작동하지만 지금은 매우 이상한 행동을 발견했습니다. 이상한 점은 다른 브라우저에서 일관성이 있다는 것입니다. 그래서 내가 잘못한 것을 이해해야합니다 ... 문서에도 불구하고 내가하고있는 일을 정확하게 말하고있는 것 같습니다. 다음은 코드입니다 (오브젝트 메소드입니다).
MyCanvas.prototype.getElement = function() {
var innerHtml = "<div></div>";
var elem = jQuery(innerHtml, {
'id' : this.viewId
});
var canvas = jQuery("<canvas/>", {
'id' : this.viewId + "canvas",
'width' : this.width,
'height' : this.height
});
var w = this.width;
var h = this.height;
jQuery(elem).append(canvas);
var imgElem = new Image();
imgElem.src = this.maskImage;
imgElem.onload = function() {
var ctx = canvas[0].getContext('2d');
ctx.drawImage(this, 0, 0, w, h);
};
return elem;
};
이후 jQuery를 다시 사용하여이 요소를 이미 페이지에있는 Div에 추가합니다 (비어 있음). 결과는 이미지가 너비보다 10 배 이상 늘어난 것입니다 .... drawImage에 대해 이해 한 결과 w와 h 값을 사용하여 이미지의 크기를 조정하고 w와 h가 캔버스의 크기와 잘 맞아야합니다.
내가 뭘 잘못하고 있니? 렌더링 된 DOM 트리에서 그림을 그리기 때문입니까?
-
답변 # 1
관련 자료
- javascript - 이미지 크기 조정을위한 HTML5 캔버스 drawimage 메소드를 구현하는 방법
- database - $or 및 $text의 MongoDB 집계 이상한 동작
- c - printf에서 '\ n'으로 '\ b'이스케이프 시퀀스의 이상한 동작
- Javascript 캔버스 드로우 이미지가 iPhone에서 작동합니까?
- foreach 루프에서 C # 이상한 동작
- javascript - div 배열에서 요소를 제거 할 때 이상한 동작 (반응 후크)
- .net - SetSystemTime 커널의 이상한 동작
- c++ - 템플릿 클래스에서 c ++ 20 개념을 사용하는 이상한 gcc (트렁크) 동작 - 버그입니까, 아니면 기능입니까?
- 자바 캘린더 이상한 행동
- python - 유효성 검사 정확도에 대한 CNN (VGG-16) 이상한 동작
- javascript - 이전에 그린 항목을 이동할 수 없다는 HTML5 캔버스 제한을 극복하는 가장 좋은 방법은 무엇입니까?
- javascript - Electron의 이상한 IPC 메시징 동작
- html - Javascript mousedown, mouseup 및 mouseover 이벤트로 이상하고 예기치 않은 동작
- inheritance - C ++에서 operator =의 이상한 동작
- bash - 길이에 관한 이상한 배열 동작
- entity framework - edmx 다이어그램을 수정 한 후 Visual Studio IDE에서 이상한 동작
- keyboard - Ubuntu 1804 Dell XPS 15 9560의 X에서 Ctrl 키의 이상한 동작
- html - Safari에서 전환으로 이상한 동작
- 자바 스크립트 캔버스 drawImage getImageData
- javascript - 플라스크에서 HTML5 Canvas로 이미지 넣기
관련 질문
- javascript - 캔버스에서 mousemove에만 획과 그림자를 추가하는 방법은 무엇입니까?
- javascript - HTML 캔버스에서 드로잉을 스케일링하고 다른 캔버스로 복사하려면 어떻게해야합니까?
- javascript - HTML5 캔버스에서 내 보내지 않는 이미지 참조 문제
- html5 - HTML 입력에서 Javascript 변수를 실시간으로 업데이트하는 방법은 무엇입니까?
- html5 - threejs 렌더링을 다른 HTML 요소와 병합하는 방법은 무엇입니까?
- javascript - 브라우저에서 워터 마크 텍스트를 왼쪽 상단에 넣는 방법
- javascript - html5 캔버스 그리드 사각형을 이미지로 채우는 방법?
- javascript - drawImage를 사용하여 타일 시트, 스프라이트 시트 또는 텍스처 아틀라스에서 여러 이미지를 그릴 때 텍스처 번짐을 방지하려면 어떻게해야합니까?
- html - 바닐라 자바 스크립트로 플레이어에서 글 머리 기호를 그리는 방법은 무엇입니까?
- javascript - 이미지가있는 캔버스에 그리기
이 "기능"은 약간 어색하다는 것을 알았습니다. 캔버스 요소의 너비 및 높이 속성을 설정하기 위해 CSS를 사용하지 않는 것처럼 보입니다. CSS가 아닌 속성으로 캔버스 요소를 추가하면 치수가 자동으로 수정됩니다.