当前位置：首页 > java >正文

40-canvas中文字的横向对齐方式

java 2025/5/15 10:34:16

40-canvas中文字的横向对齐方式_哔哩哔哩_bilibili40-canvas中文字的横向对齐方式是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第41集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=41

context.direction与context.textAlign的使用示例。（这个属性感觉不是很好用）

context.direction = 'ltr'; // 默认是从左到右

context.direction = 'rtl'; // 从右到左

【完整代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {background: skyblue;}</style>
</head><body>
</body>
<script>const canvas = document.createElement('canvas');canvas.width = 600;canvas.height = 600;document.body.append(canvas);const context = canvas.getContext('2d');// 辅助线context.strokeStyle = 'pink'context.moveTo(300, 0)context.lineTo(300, 600)context.lineWidth = 6context.stroke()// 文字的方向控制// context.direction = 'ltr'; // 默认是从左到右// context.direction = 'rtl'; // 从右到左context.font = '48px Arial';// 修改文本的对齐方式 textAlign 属性是以起点为对齐的位置context.textAlign = 'left'context.textAlign = 'right'context.textAlign = 'center'context.textAlign = 'start' // 以 direction 的开始方向为方向context.textAlign = 'end' // 以 direction 的结束方向为方向context.fillText('四喜四喜四喜', 300, 100)</script></html>

查看全文

http://www.xdnf.cn/news/6226.html