HTML5 Canvas实现文本对齐的方法总结

2019-01-28 22:15:41于丽
  •         context.fillRect(0,0,800,600);      
  •         // 在位置 400 创建蓝线            context.strokeStyle="blue";   
  •         context.moveTo(400,100);            context.lineTo(400,500);   
  •         context.stroke();      
  •            context.fillStyle = "#000";   
  •         context.font="50px Arial";      
  •         // 显示不同的 textAlign 值            context.textAlign="start";   
  •         context.fillText("textAlign=start", 400, 120);            context.textAlign="end";   
  •         context.fillText("textAlign=end", 400, 200);            context.textAlign="left";   
  •         context.fillText("textAlign=left", 400, 280);            context.textAlign="center";   
  •         context.fillText("textAlign=center", 400, 360);            context.textAlign="right";   
  •         context.fillText("textAlign=right", 400, 480);        };   
  • </script>    </body>   
  • </html>  

    运行结果:
    2016324114332033.jpg (850×500)

    垂直对齐textBaseline

    JavaScript Code复制内容到剪贴板
    1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

    其中各值及意义如下表。