4

これはほとんどの人にとって明らかなはずですので、お尋ねして申し訳ありませんが、キャンバスの幅を変更すると、テキストのサイズも変更されるのはなぜですか? どうすればこれを防ぐことができますか？

使用したコード:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.fillText("text",10,10);

ところで：私が投票/バッシングされる前に、私はこれについて20分ほど検索しようとしました..結果はありません.

4

2 に答える 2

2

CSS を使用してサイズを変更していない場合は、そのようにコンテキスト フォントを設定する必要があります。

ライブデモ

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function drawText() {
    ctx.font = 'italic 20px Calibri';
    ctx.fillText("HELLO!", 100, 100);
}

window.addEventListener("resize", function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawText()
});
drawText()​

次の例のように css を使用してキャンバス要素のサイズを変更する場合

canvas{
    width:200px;
}

その後、それを修正するためにできることはあまりありません。CSS を使用してキャンバスのサイズを変更すると、キャンバスが引き伸ばされますが、ピクセル密度は変わりません。キャンバス要素のサイズを変更するために css を使用しないでください。上記の例のように、JS を介してwidthおよびプロパティを使用する必要があります。height

于 2012-12-22T05:32:16.683 に答える
1

この問題は、CSSを使用して属性を変更したために発生する可能性があります。cssを介してプロパティにアクセスすると、キャンバスが再スケーリングされるようです。cssで変更するのではなく、JavaScriptコードでこれを使用すると、問題が解決する可能性があると思います。

document.getElementById("yourCanvasId").height = 150; // height you want to change to
document.getElementById("yourCanvasId").width = 150; // width you want to change to

同じ問題が私にも起こりました。私はこれを行い、問題は解決しました。それが役に立てば幸い ！

于 2012-12-22T05:50:02.277 に答える