Canvas文字全面解析

一、Canvas文字居中

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);

canvas是一種用於繪製圖形、動畫等的HTML元素。在canvas中繪製文字也是很方便的，通過設置font屬性來控制字體大小、字體樣式、字體顏色等。文本對齊方式通過textAlgin屬性來控制。下面是一個文字居中對齊的示例。

二、Canvas文字數組

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);
}

在canvas中，可以通過數組的方式來繪製多個文字。下面是一個繪製文字數組的示例。

三、Canvas文字動畫

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();

通過動畫的方式來繪製文字，可以吸引用戶的注意力。下面是一個繪製文字動畫的示例。

四、Canvas文字豎排

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();

在canvas中，可以通過rotate方法來旋轉繪圖環境，從而實現文字豎排。下面是一個繪製豎排文字的示例。

五、Canvas文字換行

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 canvas.width – 100 && i > 0) {
ctx.fillText(line, 50, y);
line = words[i] + ” “;
y += 30;
} else {
line = testLine;
}
}
ctx.fillText(line, 50, y);

在canvas中繪製文字經常會遇到需要自動換行的情況。可以通過split方法將長字符串拆分為單詞，並通過measureText方法來測量單詞的寬度，當一行的寬度即將超過canvas寬度時，將其打印並換行。下面是一個繪製自動換行文字的示例。

六、Canvas文字旋轉一定角度

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();

在canvas中，可以通過旋轉繪圖環境來實現文字旋轉。可以使用translate方法將原點移動到文字的中心位置，再通過rotate方法來旋轉。下面是一個旋轉文字的示例。

七、Canvas文字模糊

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);

通過設置shadowOffsetX、shadowOffsetY和shadowBlur屬性，可以讓文字產生模糊效果。下面是一個產生文字模糊效果的示例。

八、Canvas文字大小

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);

在canvas中，可以通過設置font屬性來控制文字的大小、樣式、顏色等。可以製作大小不一的文字效果。下面是一個演示大小不一的文字示例。

九、Canvas文字排版

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);

在canvas中，可以通過使用fontawesome等字體圖標庫來控制文字的樣式。可以使用不同字體庫、不同大小的文字、不同顏色的文字來做出獨特的文字排版效果。下面是一個演示不同字體庫和不同顏色的文字排版示例。