运行 ❯
获取您
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!DOCTYPE html> <html> <body> <h1>HTML5 Canvas textAlign</h1> <canvas id="myCanvas" width="500" height="150" style="border:1px solid grey;"> Sorry, your browser does not support canvas. </canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // Create a line ctx.strokeStyle = "black"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(250,0); ctx.lineTo(250,250); ctx.stroke(); ctx.closePath(); ctx.font = "20px Arial"; ctx.fillStyle = "purple"; ctx.textAlign = "center"; ctx.fillText("center", 250, 20); ctx.textAlign = "start"; ctx.fillText("start", 250, 50); ctx.textAlign = "end"; ctx.fillText("end", 250, 80); ctx.textAlign = "left"; ctx.fillText("left", 250, 110); ctx.textAlign = "right"; ctx.fillText("right", 250, 135); </script> </body> </html>
