一、Canvas文字居中
<script> var canvas = document.getElementById("myCanvas1"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.textAlign = "center"; ctx.fillText("Canvas文字居中对齐", canvas.width/2, canvas.height/2); </script>canvas是一种用于绘制图形、动画等的HTML元素。在canvas中绘制文字也是很方便的，通过设置font属性来控制字体大小、字体样式、字体颜色等。文本对齐方式通过textAlgin属性来控制。下面是一个文字居中对齐的示例。
二、Canvas文字数组
<script> var canvas = document.getElementById("myCanvas2"); var ctx = canvas.getContext("2d"); var words = ["Hello", "World", "!"]; ctx.font = "30px Arial"; ctx.fillStyle = "red"; for(var i=0; i<words.length; i++) { ctx.fillText(words[i], 50 + i * 80, 50); } </script>在canvas中，可以通过数组的方式来绘制多个文字。下面是一个绘制文字数组的示例。
三、Canvas文字动画
<script> var canvas = document.getElementById("myCanvas3"); var ctx = canvas.getContext("2d"); var text = "Canvas文字动画"; ctx.font = "30px Arial"; ctx.fillStyle = "red"; var x = canvas.width; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillText(text, x, canvas.height/2); x -= 5; if(x < -200) { x = canvas.width; } requestAnimationFrame(draw); } draw(); </script>通过动画的方式来绘制文字，可以吸引用户的注意力。下面是一个绘制文字动画的示例。
四、Canvas文字竖排
<script> var canvas = document.getElementById("myCanvas4"); var ctx = canvas.getContext("2d"); var text = "Canvas文字竖排"; ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.save(); ctx.translate(canvas.width/2, canvas.height/2); ctx.rotate(-90*Math.PI/180); for(var i=0; i<text.length; i++) { ctx.fillText(text[i], 0, i*30); } ctx.restore(); </script>在canvas中，可以通过rotate方法来旋转绘图环境，从而实现文字竖排。下面是一个绘制竖排文字的示例。
五、Canvas文字换行
<script> var canvas = document.getElementById("myCanvas5"); var ctx = canvas.getContext("2d"); var text = "Canvas文字换行示例，如果超过一定长度，就需要自动换行。"; ctx.font = "30px Arial"; ctx.fillStyle = "red"; var words = text.split(" "); var line = ""; var y = 50; for(var i=0; i<words.length; i++) { var testLine = line + words[i] + " "; if(ctx.measureText(testLine).width > canvas.width - 100 && i > 0) { ctx.fillText(line, 50, y); line = words[i] + " "; y += 30; } else { line = testLine; } } ctx.fillText(line, 50, y); </script>在canvas中绘制文字经常会遇到需要自动换行的情况。可以通过split方法将长字符串拆分为单词，并通过measureText方法来测量单词的宽度，当一行的宽度即将超过canvas宽度时，将其打印并换行。下面是一个绘制自动换行文字的示例。
六、Canvas文字旋转一定角度
<script> var canvas = document.getElementById("myCanvas6"); var ctx = canvas.getContext("2d"); var text = "Canvas文字旋转一定角度"; ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.save(); ctx.translate(canvas.width/2, canvas.height/2); ctx.rotate(45*Math.PI/180); ctx.fillText(text, 0, 0); ctx.restore(); </script>在canvas中，可以通过旋转绘图环境来实现文字旋转。可以使用translate方法将原点移动到文字的中心位置，再通过rotate方法来旋转。下面是一个旋转文字的示例。
七、Canvas文字模糊
<script> var canvas = document.getElementById("myCanvas7"); var ctx = canvas.getContext("2d"); var text = "Canvas文字模糊效果"; ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.shadowColor = "black"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 10; ctx.fillText(text, 50, 50); </script>通过设置shadowOffsetX、shadowOffsetY和shadowBlur属性，可以让文字产生模糊效果。下面是一个产生文字模糊效果的示例。
八、Canvas文字大小
<script> var canvas = document.getElementById("myCanvas8"); var ctx = canvas.getContext("2d"); var text = "Canvas文字大小不一"; ctx.font = "italic bold 50px Arial, sans-serif"; ctx.fillStyle = "red"; ctx.fillText(text, 50, 50); ctx.font = "italic 30px Arial, sans-serif"; ctx.fillStyle = "blue"; ctx.fillText(text, 50, 100); ctx.font = "normal 20px Arial, sans-serif"; ctx.fillStyle = "green"; ctx.fillText(text, 50, 150); </script>在canvas中，可以通过设置font属性来控制文字的大小、样式、颜色等。可以制作大小不一的文字效果。下面是一个演示大小不一的文字示例。
九、Canvas文字排版
<script> var canvas = document.getElementById("myCanvas9"); var ctx = canvas.getContext("2d"); var text = "Canvas文字排版，使用fontawesome字体库。"; var icon = "\uf118"; ctx.font = "30px FontAwesome, sans-serif"; ctx.fillStyle = "red"; ctx.fillText(icon, 50, 50); ctx.font = "30px Arial, sans-serif"; ctx.fillStyle = "green"; ctx.fillText(text, 80, 50); </script>在canvas中，可以通过使用fontawesome等字体图标库来控制文字的样式。可以使用不同字体库、不同大小的文字、不同颜色的文字来做出独特的文字排版效果。下面是一个演示不同字体库和不同颜色的文字排版示例。
