[英]HTML5 canvas lineWidth is being ignored
我正在畫布上書寫文本,並嘗試在其周圍添加某種邊框,該邊框應根據文本大小動態調整大小。
我的代碼是:
<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。
任何人都知道可能是什么問題?
嘗試這個:
smallStampContext.beginPath();
smallStampContext.lineWidth=Math.ceil(mainTextSize/4);
smallStampContext.moveTo(0,mainTextDimensions.height);
smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height);
smallStampContext.stroke();
moveTo
和lineTo
不繪制“線”。 實際上只有stroke
才能創建線條。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.