绘制文字

概念:

在HTML5中可以在Canvas画布中进行文字的绘制,

发同时也可以指定绘制文字的字体、大小、对齐方式等,还可以进行文字的纹理填充。。

绘制文字时可以使用fillText方法或strokeText方法:

前者用填充方式绘制字符串

void fillText(text,x,y,[maxWidth]);

第一个参数表示要绘制的文字,第二个参数表示要绘制文字的起点横坐标,第三个参数表示要绘制文字的起点纵坐标,第四个参数表示可选参数,表示显示文字时的最大宽度。

后者用轮廓方式绘制字符串。

void strokeText(text,x,y,[maxWidth]);

该方法参数部分的解释与fillText方法相同。

在shiy Canvas API来进行文字的绘制之前,可以先对该对象的有关文字绘制的属性进行设置,他们是:

font属性:设置文字字体

textAlign属性:设置文字水平对齐方式,属性值可以为start、end、left、right、center。默认值为start。

textBaseline属性:设置文字垂直对齐方式,属性值可以为top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic

 

 

 

 

应用:

 

完整代码

<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
if(canvas==null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#0000ff";
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
//填充字符串
context.fillText('示例文字',0,0);
context.font = 'bold 30px sans-serif';
//轮廓字符串
context.strokeText('示例文字',0,50);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

显示效果

 

posted on 2019-08-16 22:31  死磕&到底  阅读(389)  评论(0编辑  收藏  举报

导航