3

JavaScriptを使用してHTML5キャンバスにいくつかの.png画像を描画しようとしています。現在、キャンバスに画像を描画する機能がありますが、画像が大きすぎて一部しか表示されません。

私が現在持っている機能は次のとおりです。

function drawImage(x, y){
            var numberImage = new Image();
            numberImage.src = imageSource;
            context.drawImage(numberImage, x, y);

        }

そして、私は以下を使用して関数を呼び出します：

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";

キャンバスに描画したときに画像のサイズを変更して、サムネイルサイズの画像にする方法を誰かが知っているかどうか疑問に思っていました。

前もって感謝します！

drawImage関数にパラメータを追加して画像のサイズを変更しようとしましたが、これは何の違いもなかったようです...

var image1 = new Image();

image1.onLoad = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";
4

3 に答える 3

4

CSS を使用してキャンバスのサイズを設定していますか? 代わりに要素に高さと幅を設定する必要があります。そうしないと、キャンバス内のすべてが「予期せず」スケーリングされます。これはあなたの問題かもしれません。

HTML5 Canvas の drawImage の奇妙な動作を参照してください

于 2012-06-20T12:37:42.253 に答える
2

あなたのコードの問題を見つけるのに苦労しました...しかし、私はそれを見つけました!

あなたはこれを嫌うでしょう：あなたはimage.onloadの代わりにimage.onLoadを書きました...はい、javascriptは大文字と小文字を区別します。:-)

正しいコードは次のとおりです。

var image1 = new Image();

image1.onload = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";
于 2012-04-25T11:45:47.637 に答える
0

drawImage() は、追加の幅と高さのパラメーターを受け取ります。

   context.drawImage(image, x, y, width, heighT)

https://duckduckgo.com/?q=!mdn+drawimage

于 2012-04-25T07:39:12.120 に答える