HTML5画布lineWidth被忽略

时间:2012-10-10 14:34:03

标签: javascript html5 canvas html5-canvas

我在画布上写文字,并试图在它周围添加某种边框,这些边框应根据文字大小动态调整大小。

我的代码是:

<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.

任何人都知道可能出现什么问题?

1 个答案:

答案 0 :(得分:3)

试试这个:

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

moveTolineTo不会绘制“行”。只有stroke实际创建了该行。