홈>2020-02-01 00:17

이상한 HTML5 Canvas drawImage 동작

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 트리에서 그림을 그리기 때문입니까?

html5html5-canvasscalingdrawimage

답변 # 1
이 "기능"은 약간 어색하다는 것을 알았습니다. 캔버스 요소의 너비 및 높이 속성을 설정하기 위해 CSS를 사용하지 않는 것처럼 보입니다. CSS가 아닌 속성으로 캔버스 요소를 추가하면 치수가 자동으로 수정됩니다.
```
var canvas = jQuery("<canvas/>", {
    'id' : this.viewId + "canvas"
});
$('#' + this.viewId).attr('height', this.height).attr('width', this.width);
```

Python2.net

이상한 HTML5 Canvas drawImage 동작

관련 자료