canvas笔记-文本水平垂直对齐与度量
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-文本水平垂直对齐与度量
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在canvas中通過textAlign可以設置文本的對齊：
其中left為左對齊，center為居中對齊，right為右對齊。
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "#058";context.font = "bold 40px sans-serif";context.textAlign = "left";context.fillText("textAlign = left", 400, 100);context.textAlign = "center";context.fillText("textAlign = left", 400, 200);context.textAlign = "right";context.fillText("textAlign = left", 400, 300);//baselinecontext.strokeStyle = "#888";context.moveTo(400, 0);context.lineTo(400, 800);context.stroke();}</script></body> </html>?
?
上面是指水平對齊，下面記錄下垂直對齊
通過調用textbaseline函數進行垂直對齊，其中top為向上對齊，middle為居中對齊，bottom為底部對齊，默認情況下是alphabetic，還有2給參數一個是ideographic為中文，hanging為印度文的。
下面簡單記錄下。
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "#058";context.font = "bold 40px sans-serif";context.textBaseline = "top";context.fillText("中文ABC12345@！#@￥%%%*&", 40, 100);drawBaseline(context, 100);context.textBaseline = "middle";context.fillText("中文ABC12345@！#@￥%%%*&", 40, 200);drawBaseline(context, 200);context.textBaseline = "bottom";context.fillText("中文ABC12345@！#@￥%%%*&", 40, 300);drawBaseline(context, 300);context.textBaseline = "ideographic";context.fillText("中文ABC12345@！#@￥%%%*&", 40, 400);drawBaseline(context, 400);context.textBaseline = "hanging";context.fillText("中文ABC12345@！#@￥%%%*&", 40, 500);drawBaseline(context, 500);}function drawBaseline(cxt, h){let width = cxt.canvas.width;cxt.save();cxt.strokeStyle = "#899";cxt.lineWidth = 2;cxt.moveTo(0, h);cxt.lineTo(width, h);cxt.stroke();cxt.restore();}</script></body> </html>?
?
?
下面是文本的度量
再canvas中通過measureText(string).width可以獲取其長度。
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "#058";context.font = "bold 40px sans-serif";let stringValue = "中文ABC12345@！#@￥%%%*&";context.fillText(stringValue, 40, 100);let textWidth = context.measureText(stringValue).width;context.fillText("字符串寬度為：" + textWidth + "px", 40, 200);}</script></body> </html>?
?
總結
以上是生活随笔為你收集整理的canvas笔记-文本水平垂直对齐与度量的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java笔记-Log4j在Spring
- 下一篇： 计算机网络-VRRP