html5教程之HTML5 Canvas的文本器度

显示全部楼层 · 发表于 2015-1-15 23:09:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。破洛洛文章简介：要取得HTML5Canvas的文本的文本器度，我们可使用的measureText（）的画布高低文的办法。这类办法必要一个文本字符串，并前往一个器度工具的基本上供应的文本，并分派给高低文确当前文本的字体。
要取得HTML5Canvas的文本器度，我们可使用的measureText（）的画布高低文的办法。这类办法必要一个文本字符串，并前往一个器度工具的基本上供应的文本，并分派给高低文确当前文本的字体。

varmetrics=context.measureText(text);varwidth=metrics.width;

复制代码

今朝，文本的宽度是独一的器度与measureText（）的办法。今朝还不撑持文本的高度公制。

<!DOCTYPEHTML>
<html>
<head>
<style>
body{
margin:0px;
padding:50px;
}
#myCanvas{
border:1pxsolid#9C9898;
}
</style>
<script>
window.onload=function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
varx=canvas.width/2;
vary=canvas.height/2-10;
vartext="HelloWorld!";
context.font="30ptCalibri";
context.textAlign="center";
context.fillStyle="blue";
context.fillText(text,x,y);
//gettextmetrics
varmetrics=context.measureText(text);
varwidth=metrics.width;
context.font="20ptCalibri";
context.textAlign="center";
context.fillStyle="#555";
context.fillText("("+width+"pxwide)",x,y+40);
};
</script>
</head>
<bodyonmousedown="returnfalse;">
<canvasid="myCanvas"width="578"height="200">
</canvas>
</body>
</html>

</p>
HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。

显示全部楼层 · 发表于 2015-3-6 22:45:38

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[HTML5] html5教程之HTML5 Canvas的文本器度

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子