27

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ツリーから描画を行うためですか？

4

1 に答える 1

56

この「機能」も少し面倒だと思いました。CSS を使用して canvas 要素の幅と高さのプロパティを設定したくないようです。canvas 要素に (CSS ではなく) 属性を追加すると、寸法が自動的に修正されます。 

var canvas = jQuery("<canvas/>", {
    'id' : this.viewId + "canvas"
});

$('#' + this.viewId).attr('height', this.height).attr('width', this.width);
于 2010-11-18T20:38:56.283 に答える