[英]How to center canvas javascript, dynamically based on text length
我想居中顯示“我的文字!” 不管字符串的長度如何...隨着文本長度的增加,x坐標也需要減小。
如何獲得字符串的x長度?
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
context.fillText("My TEXT!", 20, 20);
};
imageObj.src = "http://images.google.com/intl/en_ALL/images/srpr/logo11w.png";
};
</script>
</head>
<body>
<canvas width="282px" height="177px" id="myCanvas"></canvas>
</body>
</html>
只需將其添加到您的代碼中:
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "12pt Arial";
/// set text alignment to center
context.textAlign = 'center';
/// draw from center
context.fillText("My TEXT!", canvas.width * 0.5, 20);
};
如果需要獲取x坐標本身,則需要根據文本的寬度(在設置字體之后)進行計算:
var width = context.measureText(myText).width;
var x = (canvas.width - width) * 0.5;
嘗試設置文本對齊方式。
context.textAlign = "center";
context.fillText("My LONGGGGG TEXT!", (canvas.width)/2, 20);
這應該是您想要的。 http://www.html5canvastutorials.com/tutorials/html5-canvas-text-align/
畫布上有一個textAlign
屬性,您可以將其設置為“居中”。 然后在畫布的正中間開始填充文本。
編輯 -這是一個小提琴http://jsfiddle.net/mlienau/2MnnC/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.