我目前正在使用HTML5的畫布使用Impact字體渲染一個(gè)字符串。這樣做很好，但是筆畫似乎從整個(gè)文本區(qū)域溢出。有什么辦法可以解決這個(gè)問題嗎？

代碼和渲染可以在這里看到:http://jsfiddle.net/5uczpa1k/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>

嘗試添加一個(gè)miterLimit -它定義了用于繪制斜接的斜接(角)長度與描邊寬度之比的限制。超過限制時(shí)，連接將從斜接轉(zhuǎn)換為斜角:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "80px Impact";
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.fillStyle = 'white';
ctx.miterLimit = 2;
ctx.strokeText("A TEXT DEMO", 50, 150);
ctx.fillText("A TEXT DEMO", 50, 150);

<canvas id="myCanvas" width="500" height="500"></canvas>

描邊總是一半畫在里面，一半畫在外面，除非您自己進(jìn)行必要的計(jì)算來做一些不同的事情，并繪制兩個(gè)單獨(dú)的形狀，一個(gè)用于填充，一個(gè)用于輪廓。即使線寬是奇數(shù)，也應(yīng)用默認(rèn)的對半方法，在這種情況下，瀏覽器將嘗試在兩個(gè)實(shí)際像素之間的中間位置繪制，從而導(dǎo)致模糊和顏色強(qiáng)度損失(除非通過應(yīng)用平移變換將畫布在兩個(gè)維度上移動(dòng)0.5像素)。這是一個(gè)更大的問題，當(dāng)半透明涉及。描邊后執(zhí)行不透明填充。因此，最終結(jié)果是你的大綱實(shí)際上變成了& quot外面& quot但其表觀寬度是規(guī)范中規(guī)定寬度的一半。