1

HTML5 キャンバス要素を使用しています。次のJavaScriptを使用して、キャンバスに画像を描画しています:

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    ctx.drawImage(img,0,0);
}

これはうまくいきます。ただし、いくつかの奇妙な css の問題が発生しています。次のようにインライン css を使用すると、イメージはキャンバス内で完全にスケーリングされます。

<canvas id="canvas" width="800" height="448"></canvas>

ただし、インライン css を削除して外部 css ファイルを使用すると、画像がキャンバスに対して大きすぎて描画され、画像の左上隅しか表示されません。私が使用しているcssは次のとおりです。

#canvas {
    height:448px;
    width:800px;
    border:none;
}

インライン css を使用すると、描画されたイメージが何らかの形でキャンバスから css を継承しますか? ここで何が起こっているのかわかりませんが、外部 css ファイルを使用したいと思います。

編集 キャンバス要素にスタイリングを指定しない場合、サイズは小さくなりますが、画像の上隅だけが表示されます。css ファイルでスタイルを設定すると、キャンバスは大きくなりますが、画像を拡大しただけのようになります。同じ量の画像が表示されていますが、現在は大きくなっています。

EDIT 2 受け取った回答に基づいて、JavaScript を使用してキャンバスの dom サイズを調整しています。img.onload 関数を次のように変更しました。

img.onload = function() {
    if (options.imageWidth == 0 && options.imageHeight == 0) {
        canvas.height = this.height;
        canvas.width = this.width;
    } else {
        canvas.height = options.imageHeight;
        canvas.width = options.imageWidth;
    }
    ctx.drawImage(img,0,0);
}
4

2 に答える 2

4

キャンバスには、実際のピクセル グリッド サイズ (widthおよびheight属性内) と CSS サイズの 2 つのサイズがあります。

ピクセル サイズが指定されていない場合、通常はデフォルトで 300x300 などになります。

CSS サイズは、ページで使用されるスペースの量のみを指定し、デフォルトはピクセル サイズです。それらが等しくない場合、画像はスケーリングされます。

要素でピクセル サイズを指定するか、<canvas>Javascript を使用して設定する必要があります。

var img = new Image();
var canvas = this.e;
var ctx = canvas.getContext('2d');
img.src = options.imageSrc;
img.onload = function() {
    canvas.width = this.width;    // new code
    canvas.height = this.height;  //    "
    ctx.drawImage(img, 0, 0);
}
于 2012-09-26T06:44:27.547 に答える
0

外部スタイルに !important を付けてみてください。何かがそれをオーバーライドしている可能性がありますが、インラインでは最後にオーバーライドされます。

#canvas {
    height:448px !important;
    width:800px !important;
    border:none !important;
}
于 2012-09-26T06:21:07.507 に答える