canvas绘制文字
摘要：canvas绘制文字 function draw(id){ var canvas = document.getElementById(id);//获得canvas对象 ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制文字</title>
<script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
function draw(id){
var canvas = document.getElementById(id);//获得canvas对象
var context = canvas.getContext('2d');//获得上下文，并设置成2d
context.fillStyle = "green";//设置画布大小的矩形颜色
context.fillRect(0,0,800,300);//绘制画布大小的矩形
context.fillStyle = "white";//设置文字的填充色
context.strokeStyle = "white";//设置文字边框的颜色
context.font = "bold 40px '华文行楷','微软雅黑'";//设置字体粗细，大小，样式【可多选】。
//文字垂直对齐方式，默认值是alphabetic
// Bottom Alphabetic
//—————————————————Middle——————————————————————————————
//Top Hanging
//context.textBaseline = 'alphabetic';
//属性值可以是top（顶部对齐）、hanging（悬挂）、middle（中间对齐）、bottom（底部对齐）、alphabetic是默认值。
context.textBaseline = 'hanging';
//设置文字水平对齐方式，默认值是start
// |
// |
// |start
// end|
// |left
// center
// right|
// |
// |
//context.textAlign = 'start';
//属性值可以设置为：start、end、left、right、center
context.fillText("欢迎光临华帅博客",30,70);
context.strokeText("HTML5+CSS3实战",200,130);
context.fillText("新手入门，大神见谅。",380,190);
context.fillText('123456789987654321123456789987654321123456789987654321123456789987654321123456789987654321',0,260,800)
}
绘制字体时可以使用的fillText方法或者StrokeText方法。
fillText方法用填充的方式来绘制字符串
context.fillText(text,x,y,[maxwidth]);
strokeText方法用轮廓的方式来绘制字符串
context.strokeText(text,x,y,[width]);
第一个参数text表示要绘制的文字，第二个参数x表示要绘制的起点横坐标，第三个参数y表示要绘制的文字的起点纵坐标，第四个参数maxwidth为可选参数，表示显示文字时最大的宽度，可以防止文字溢出。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢