0

キャンバスにテキストを書いていて、その周りに何らかの境界線を追加しようとしています。これは、テキスト サイズに基づいて動的にサイズ変更する必要があります。

私のコードは次のとおりです。

<script>
var mainText='this is a test';
var mainTextSize=40;
var mainTextDimensions=getTextDimensions(mainText,mainTextSize,'verdana');

var smallStampCanvas=document.createElement("canvas");
smallStampCanvas.width=mainTextDimensions.width;
smallStampCanvas.height=totalHeight;
var smallStampContext=smallStampCanvas.getContext('2d');
smallStampContext.textBaseline='top';

smallStampContext.fillStyle = '#FF0000'; 
smallStampContext.strokeStyle = smallStampContext.fillStyle;

smallStampContext.font = "bold "+mainTextSize+"px verdana";
smallStampContext.fillText(
    mainText,
    0,
    0
);

smallStampContext.strokeRect(0,0,smallStampCanvas.width,smallStampCanvas.height);
smallStampContext.strokeRect(0,0,smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
</script>

lineWidth を除いて、すべて正常に動作します。どのような値を入力しても、何の効果もないようです。(行は常に 1px です) ログに記録するとき、整数 10 が入力されます。

何が問題なのか誰にも分かりますか？

4

1 に答える 1

3

これを試して：

smallStampContext.beginPath();
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height); 
smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.stroke();

moveTolineTo「線」を引かないでください。stroke実際に線を作成するだけです。

于 2012-10-10T14:51:31.093 に答える