javascript - 对齐html5 Canvas 矩形内的文本

Question

我有一个可调整大小的矩形，我希望它旁边有右对齐的文本(日期数字)。

我现在拥有的:

(调整文本大小时也没有真正垂直对齐)

我想要什么:

有没有办法填充文本并将其对齐在绘制的矩形内？也欢迎其他建议。

js.do code

        function dayRect(day) {
            const days = ["I","II","III","IV","V","VI","VII"];
            context.beginPath();

            //maybe align the text inside this rect somehow
            context.rect(0, day*h/7, 3*w/27, h/7);

            context.stroke();
            context.font = "0.5rem Arial";
            context.fillStyle = "#fff";
            context.fillText(days[day], 0, (day+1)*h/7);
        }

Answer 1

由于我看不到任何内容，所以我更改了您的代码中的一些内容。您需要对文本使用 context.textAlign="right" 并将其移动到其他位置。我希望它有帮助。

		function getMousePos(canvas, evt) {
			var rect = canvas.getBoundingClientRect();
			return {
			x: evt.clientX - rect.left,
			y: evt.clientY - rect.top
			};
		}
		
		var canvas = document.getElementById("posHourCanvas");
		var context = canvas.getContext('2d');
    canvas.width=600,canvas.height=300;
		
		var boxes = [];
		
		function init() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			boxes.length = 0;
			const strokeWidth = 0.6;
			//canvas.width = $('#two')[0].clientWidth;
			var cellSize = canvas.width/27;
			canvas.height = 7/27 * canvas.width;
			var x = y = 0;
			draw(x,y,canvas.width,canvas.height,cellSize,strokeWidth);
		}
		
		function Box(x, y, day, hour) {
			this.x = x;
			this.y = y;
			this.day = day;
			this.hour = hour;
		}
		
		function draw(x, y, w, h, cellSize, strokeWidth) {
		
			let onePixel = cellSize * strokeWidth;
			cellSize = cellSize * (1 - strokeWidth);
			context.beginPath();
			context.lineWidth = 1;
			context.strokeStyle = 'rgba(0, 0, 0, 1)';
			const rectCoordinates = {
				x: x+3*w/27,
				y: y,
				w: w-3*w/27,
				h: h
			}
			context.rect(rectCoordinates.x, y, rectCoordinates.w, h);
			context.fillStyle = 'white';
			context.fill();
			context.stroke();
			
			let offX = rectCoordinates.w/24 + rectCoordinates.x;
			let offY = h/7;
			
			for (let i = 0; i < 7; i++) {
				dayRect(i);
				context.beginPath();				
				context.moveTo(0, offY);
				context.lineTo(w, offY);
				context.strokeStyle = "black";
				context.stroke();
				offY+=h/7;
			}
			
			for (let i = 0; i < 24; i++) {
				context.beginPath();
				context.moveTo(offX, 0);
				context.lineTo(offX, h);
				context.stroke();
				offX+=rectCoordinates.w/24;
			}
			
			function dayRect(day) {
				const days = ["I","II","III","IV","V","VI","VII"];
				context.beginPath();

				context.rect(0, day*h/7, 3*w/27, h/7);
				
				context.stroke();
				context.font = "0.5rem Arial";
				context.fillStyle = "#fff";
        context.textAlign="right";
				context.fillText(days[day], 60, (day+1)*h/7);
			}			
		}
	
		init();

body {
  margin: auto;
  color: white;
  background-color: black;
  min-height: 100vh;
}

<div id="parent">
  <div>text above</div>

  <div id="two">
    <canvas id="posHourCanvas" width="600" height="300"></canvas>
  </div>

  <div>text under</div>
</div>