您的位置：首页 > Web前端 > HTML5

html5 canvas学习--绘制文字

2016-10-07 21:10 363 查看

1.绘制填充文字：context.fillText(text,x,y,[maxWidth])

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.font = "italic 35px 黑体";
ctx.fillStyle = "Red";
ctx.fillText("绘制填充文字",30,60,200);
ctx.font = "bold 35px 宋体";
ctx.fillStyle = "blue";
ctx.fillText("绘制填充文字",30,100);
ctx.font = "25px 隶书";
ctx.fillStyle = "Green";
ctx.fillText("绘制填充文字",30,130);
}
window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="border:solid 1px gray;"></canvas>
</body>
</html>

2. 绘制轮廓文字：context.strokeText(text,x,y,[maxWidth]); 测量文字的长度:context.measureText(text);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.font = "bold 20px 黑体";
ctx.fillStyle = "Blue";
var txt1 = "滚滚长江东逝水,浪花淘尽英雄";
ctx.fillText(txt1,10,40);
var txt2 = "以上字符串的宽度为";
var mtx1 = ctx.measureText(txt1);
var mtx2 = ctx.measureText(txt2);
ctx.font = "bold 15px 宋体";
ctx.fillStyle = "Red";
ctx.fillText(txt2,10,80);
ctx.fillText(mtx1.width,mtx2.width,80);
var message = "这是文字";
// 绘制空心文字
ctx.font = "25px 隶书";
ctx.strokeStyle = "Green";
ctx.strokeText(message,30,130);
}

window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="350" height="200"></canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航