canvas实现分散对齐

canvas水平对齐方式有：

值	描述
start	默认，文本在指定的位置开始
end	文本在指定的位置结束
center	文本的中心被放置在指定的位置
left	文本左对齐
right	文本右对齐

JS调用：

ctx.textAlign = "center | end | left | right | start";

那么问题来了，如果我们要实现左右分散对齐呢？
我有个不成熟的办法，仅供参考，如果有更好的办法，请在评论区告诉我。

主要思想：我们先看看ctx.textAlign = "center"的含义：文本的中心位置放置在指定的位置，那我们现在假设canvas的宽度为L，需要居中的字符串length为N,然后我们将宽度分为N+1，每个放在每一段的中间，可能解释的有点不好理解，看看示意图：
这里写图片描述

废话不多说了，直接上代码：
需要引用Jquery的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
    描述：canvas文字左右居中对齐
    条件：保证文字在一行放的下的条件
--> 
<canvas id="canvas"></canvas>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
    var objStr = "13564";
    canvasJustify(objStr,400,200);
});
/*
 * str:需要居中对齐的字符串
 * cw:canvas的宽度
 * ch:canvas的高度
 * */
function canvasJustify(str,cw,ch){
    var c = $("#canvas")[0];
    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";//设置文字居中对齐
    $.each(str.split(''),function(index,element){
        ctx.fillText(element,(remainL/2 + (index+1)*everyL), ch/2);
    });
}
</script>   
</body>
</html>

原生：

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

canvas实现分散对齐

猜你喜欢