canvas實現分散對齊
阿新 • • 發佈：2019-01-30
canvas水平對齊方式有：
| 值 | 描述 |
|---|---|
| start | 預設，文字在指定的位置開始 |
| end | 文字在指定的位置結束 |
| center | 文字的中心被放置在指定的位置 |
| left | 文字左對齊 |
| right | 文字右對齊 |
JS呼叫：
ctx.textAlign = "center | end | left | right | start";那麼問題來了，如果我們要實現左右分散對齊呢？
我有個不成熟的辦法，僅供參考，如果有更好的辦法，請在評論區告訴我。
主要思想：我們先看看ctx.textAlign = "center"
length為N,然後我們將寬度分為N+1，每個放在每一段的中間，可能解釋的有點不好理解，看看示意圖： 
廢話不多說了，直接上程式碼：
需要引用Jquery的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
描述：canvas文字左右居中對齊
條件：保證文字在一行放的下的條件
--> 原生：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
描述：canvas文字左右居中對齊
條件：保證文字在一行放的下的條件
-->
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload = function(){
var objStr = "13564";
canvasJustify(objStr,400,200);
}
/*
* str:需要居中對齊的字串
* cw:canvas的寬度
* ch:canvas的寬度
* */
function canvasJustify(str,cw,ch){
var c = document.getElementById("canvas");
c.width = cw;
c.height = ch;
var ctx = c.getContext("2d");
ctx.fillStyle = "#1fb8dc"
ctx.fillRect(0,0,cw,ch);
var strL = str.length;
var everyL = Math.floor(cw/(strL+1));//每一段的寬度
var remainL = cw - everyL*(strL+1); //沒有整除剩餘的長度
ctx.fillStyle = "blue";
ctx.font="18px Arial";
ctx.textAlign = "center";//設定文字居中對齊
for(var i = 0; i<strL; i++){
ctx.fillText(str[i],(remainL/2 + (i+1)*everyL), ch/2);
}
}
</script>
</body>
</html>