canvas笔记-文本（fillText）旋转（rotate）
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-文本（fillText）旋转（rotate）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這里fillText直接使用rotate會(huì)有問(wèn)題。估計(jì)是旋轉(zhuǎn)中心有問(wèn)題。
?
正確的邏輯為：
先使用translate移動(dòng)中心點(diǎn)在文本起始位置，如何在0，0處fillText即可。
如果要在字符串中心進(jìn)行旋轉(zhuǎn)，則需要獲取字符串長(zhǎng)度，translate的時(shí)候x進(jìn)行+，y軸進(jìn)行-即可。
?
程序運(yùn)行截圖如下：
綠色的為原始字符串，紅色是從頂部進(jìn)行旋轉(zhuǎn)，綠色為在中心進(jìn)行旋轉(zhuǎn)。
代碼如下：
?
<!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;">當(dāng)前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 1980;canvas.height = 1024;let context = canvas.getContext("2d");context.fillStyle = "green";context.fillText("中文ABCDEFG", 400, 400);context.save();context.translate(400, 400);context.rotate(90 * Math.PI / 180);context.fillStyle = "red";context.fillText("中文ABCDEFG", 0, 0);context.restore();//中心位置旋轉(zhuǎn)let strWidth = context.measureText("中文ABCDEFG").width;console.log("strWidth:" + strWidth);context.save();context.translate(400 + strWidth / 2, 400 - strWidth / 2);context.rotate(90 * Math.PI / 180);context.fillStyle = "blue";context.fillText("中文ABCDEFG", 0, 0);context.restore();}</script></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-文本（fillText）旋转（rotate）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java笔记-EasyCaptcha在前
- 下一篇： Qt文档阅读笔记-隐式共享（Implic