首先明確canvas是有一個(gè)font屬性的。利用這個(gè)屬性我們可以將輸入的文字畫到畫布或者說是已有圖片上。先進(jìn)行最基本的：畫布上寫字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas寫字測(cè)試</title>
</head>
<body>
<input type = "text" id = "text" placeholder = "請(qǐng)輸入文字"><br/><br/>
<input type="button" name="" value = "寫入文字" id = "btn"><br/><br/>
<canvas id = "mycv" width = "600px" height = "600px" style = "border:1px solid black;">
您的瀏覽器不支持canvas標(biāo)簽
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycv");
var text = document.getElementById("text");
var btn = document.getElementById("btn");
btn.onclick = function() {
//clear
canvas.height = canvas.height;
var value = text.value;
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
//創(chuàng)建漸變
var grad=ctx.createLinearGradient(0,0,canvas.width,0);
grad.addColorStop("0","magenta");
grad.addColorStop("0.5","yellow");
grad.addColorStop("1.0","red");
ctx.font = "bold 30px arial";
ctx.fillStyle = "blue";
//豎排文字 保持X軸不變Y軸遞增
for(var i = 0; i < value.length; i ++) {
//繪制有填充的文本
ctx.fillText(value[i], 10, 35*(i+1));
//繪制無填充的文本
ctx.strokeText(value[i], 60, 35*(i+1));
}
//橫排文字
ctx.strokeStyle = grad;
ctx.fillText(value,150,50);
ctx.strokeText(value, 150, 150);
}
}
</script>
</html>
圖片如下：
具體的font屬性可參考http://www.w3school.com.cn/tags/canvas_font.asp
