html定义字体纵向对齐,HTML5 Canvas的文本如何实现垂直对齐

垂直对齐，使用CSS很容易实现，如果想在HTML5 Canvas中实现垂直对齐，如何设置呢，这就是今天要分享的笔记。

HTML画布垂直对齐的文本，我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一：top, hanging, middle, alphabetic, ideographic, and bottom。除非另有规定，textBaseline属性默认为字母。

context.textBaseline=[value];

html5_canvas_text_baseline

body {margin: 0px;padding: 0px;}

#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var x = canvas.width / 2;

var y = canvas.height / 2;

context.font = "30pt Calibri";

// textAlign aligns text horizontally relative to placement

context.textAlign = "center";

// textBaseline aligns text vertically relative to font style

context.textBaseline = "middle";

context.fillStyle = "blue";

context.fillText("Hello World!", x, y);

};

html定义字体纵向对齐,HTML5 Canvas的文本如何实现垂直对齐相关推荐

html5文本设置字体大小,HTML5 Canvas的文本设置字体和大小
网页制作文章简介:HTML5 Canvas的文本设置字体和大小. HTML5 Canvas的文本设置字体和大小,我们可以使用的字体在画布范围内的属性. 下面我们就做一个简单的实例为大家讲解下,基本语法 ...
html canvas text 居中,HTML5 Canvas Text文本居中实例
canvas> varcancasOne=document.getElementById('canvasOne');varctx=cancasOne.getContext('2d');varte ...
HTML5 Canvas Text文本居中实例
1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...
html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
uilabel 垂直居中对齐_给UILabel的文字添加垂直对齐的方式
UILabel的文字默认是垂直居中显示的,而且UILabel并没有为我们提供设置垂直对齐方式的选项,所以要自己想办法了. 我的办法是给UILabel添加一个Category,来修改UILabel的绘制 ...
html如何将段落对齐,如何用CSS设置段落的垂直对齐（附代码）
在浏览网页时,经常看到一些段落他是垂直对齐的,今天这篇文章就和大家讲讲如何用CSS设置段落的垂直对齐,有需要的朋友可以参考一下,希望对你有所帮助. CSS中通过属性vertical-align来设置段 ...
html文本长度不一样的对齐,关于html：文本在中间不对齐
本问题已经有最佳答案,请猛点这里访问. 我想重新创建这样的东西: 然后我会将它用于社交媒体和外部网站:)这是我能想到的: 如您所见,这里有两个问题: 图片不适合div. 文字不在中间. 我想如果我可以 ...
html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法
今天我们开始征战一个全新的内容--HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字.是不是很有意思? 好了,先预告一下Canvas 文 ...

html定义字体纵向对齐,HTML5 Canvas的文本如何实现垂直对齐

html定义字体纵向对齐,HTML5 Canvas的文本如何实现垂直对齐相关推荐

最新文章

热门文章