> web前端 > HTML 5 > 正文

html5 canvas 文字居中对齐

2013-07-09

我要投稿

[color=eight:25px]html部门

[color=eight:25px]

[color=eight:25px]css部门

[color=eight:25px]canvas{width:1000px;height:700px;}

[color=eight:25px]js部门

初初的根本格局：

[color=eight:25px]window.οnlοad=function(){var canvas=document.getElementById('myCanvas');

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

//前面书写画绘号令

context.beginPath();//开端画绘的声明

context.moveTo(x,y);//界说出发点,能够理解为将绘笔挪动迪苹个位置

context.lineTo(x,y);//界说一个起点

context.lineWidth=5;//界说线条宽度

context.strokeStyle='blue';//界说线条颜色

context.lineCap='round';//界说线帽(露圆角、尖角、斜角)

context.stroke();//给线条上色，即停止画造

}

//正在此先举一个绘线的小例子

效果图：

[color=eight:25px]

代码以下：

< html>

< head>

< meta charset=utf-8 />

< title>canvas绘线

< /head>

< body>

< /body>

< script type="text/JAVAscript">

var can=document.getElementById('test');

var draw=can.getContext('2d');

draw.beginPath();

draw.moveTo(50,100);

draw.lineTo(300,100);

draw.lineWidth=50;

draw.strokeStyle='#0f0';

draw.lineCap='round';

draw.stroke();

< /script>

< /html>尔后的代码只交换beginPath()后的内容

接下去，再引见寂?属性

context.font="文字特殊款式 字体巨细 字体"//此中文字特殊款式可选，假如没有挖写，默许为normal，借可使用italic暗示斜体等等

context.fillStyle='#f00';//文字颜色

context.strokeText('利用canvas创立的文字——有边框',x,y);//创立文字，控造文件的肇端位置

context.fillText('利用canvas创立的文字——有添补',x,y);//创立文字，控造文件的肇端位置

context.textAlign='center';//文本程度对齐方法

context.textBaseline='middle';//文本垂曲标的目的，基线位置

[color=eight:25px]

[color=eight:25px]举个例子。先看效果

[color=eight:25px]

代码：

draw.font="normal 30px arial"

draw.fillStyle='#00f';

draw.fillText('利用canvas创立的文字——有添补',50,50);

draw.font="italic 40px arial"

draw.strokeStyle='#f00';

draw.strokeText('利用canvas创立的文字——无添补',50,120);

接下去再用程度对齐，基线对齐两个属性，吭哟效果

[color=eight:25px]1)对上面的'利用canvas创立的文字——无添补'加减：程度居中对齐

[color=eight:25px]

draw.strokeStyle='#f00';

draw.textAlign='center'；//加减的一止代码

draw.strokeText('利用canvas创立的文字——无添补',50,120);

效果以下：

[color=eight:25px]

假如改成draw.textAlign='right'，则效果以下

可睹，所谓的left、right、center指的是定位参考面的位置

right暗示，以整段文字的最左侧做为定位面，然后那个面的位置位于上里所界说的120px(横背)位置

那里很容易弄治，请留意！

最初再引见一个属性，获与天生的文本的少度

draw.measureText(文本或变量名称)

举个例子

代码以下：

var can=document.getElementById('test');

var draw=can.getContext('2d');

var text='利用canvas创立的文字——有添补'

draw.beginPath();

draw.font="normal 30px arial"

draw.fillStyle='#00f';

draw.fillText(text,50,50);

var a=draw.measureText(text);

var width=a.width;

draw.font="normal 30px arial"

draw.fillStyle='#f00';

draw.fillText('文字少度为'+width+'px',50,100);假使我改动width=a.width的位置

[color=eight:25px]会发生别的的效果(那是代码的从上到下剖析所酿成的)

[color=eight:25px]代码以下：

[color=eight:25px]

var can=document.getElementById('test'); var draw=can.getContext('2d'); var text='利用canvas创立的文字——有添补'; var a=draw.measureText(text); var width=a.width; draw.beginPath(); draw.font="normal 30px arial" draw.fillStyle='#00f'; draw.fillText(text,50,50); draw.font="normal 30px arial" draw.fillStyle='#f00'; draw.fillText('文字少度为'+width+'px',50,100); 效果如图：

[color=eight:25px]

点击复制链接 与好友分享!回本站首页

相关TAG标签

文字

上一篇：HTML5 Canvas渐进填充与透明

下一篇：写个一个简单的canvas图表

相关文章

Sencha toucha2中设置文本框默认提示

HTML5/CSS3(PrefixFree.js) 3D文字特效

HTML5绘图之文字旋转

HTML5：标记文字

canvas 三 图片插入及文字填充

图文推荐

html文字居中�?a href="//www.css5.com.cn/html/352.shtml">html图片居中方法代码，通过在html中实现文字居中图片居中篇

�?a href="//www.css5.com.cn/html/">html中实现文字图片内容居中有三种方法，其中两种使�?a href="//www.css5.com.cn/">CSS样式实现，一直使用原始的html标签内加�?ldquo;align="center"”�?a href="//www.css5.com.cn/css/350.shtml">居中)实现�?/p>

一、对body加CSS居中样式

我们直接�?a href="//www.css5.com.cn/html/356.shtml">body设置CSS样式�?strong>text-align:center

1、完整HTML实例代码�?/p>

body{text-align:center}

我会被居�?

2、居中实例截�?/p>

对body设置居中实现文字或图片居中截�?/p>

二、对文字外层对象加css居中样式

首先我们CSS命名选择器为“.CSS5”,对此选择器内加居中样式。我们实例演�?�?a href="//www.css5.com.cn/">DIV对象，一个放文字一个放图片�?/p>

1、对应CSS代码如下�?/p>.CSS5{text-align:center}

2、完整HTML+DIV+CSS代码如下�?/p>

.CSS5{text-align:center}

我会被居�?lt;/div>

3、CSS实现对象内图片和文字居中效果截图

实现html文字居中-html图片居中实例截图

这里说明，图�?ldquo;CSS5-logo-201305.gif”文件是与html放一起，使用html img标签实现图片引入html�?/p>

4、本居中实例在线演示�?a href="//www.css5.com.cn/yanshi/201308/2013081701/" class="yanshi" target="_blank">查看案例

5、本居中实例打包下载�?/p>

三、之间对文字外层对象加align="center"

此方法是以前较为常见的方法，直接在html标签内使用align="center"即可实现对象内图片或文字内容实现居中�?/p>

我们实例演示HTML表格里居中与一般HTML标签内内容居中�?/p>

1、完�?a href="//www.css5.com.cn/html/26.shtml">HTML源代�?/a>�?/p>

html align居中

我会居中�?lt;/div>

表格中居�?lt;/td>

2、实例效果截�?/p>

html文字居中�?a href="//www.css5.com.cn/html/380.shtml">html table表格内文字居中实现截�?/p>

直接在标签内使用align属性，方便实践普�?a href="//www.css5.com.cn/html/323.shtml">html标签和html表格标签内使�?ldquo;align="center"”居中代码实现对象内内容居中�?/p>

标签(Tag): 居中 html

本文分享URL地址�?a href="/html/603.shtml">/html/603.shtml

作者：css5

CSS text-align

text-align语法：

text-align : left | right | center | justify

text-align参数值与说明：

left : 左对齐

right : 右对齐

center : 居中

*justify : 两端对齐(不推荐使用，通常大部分浏览器不使用)

我们对text-align常用的参数值为left、right、center

text-align功能说明：

设置或检索对象中文本的左中右对齐方式。

案例示范：

我们设置3个盒子，分别都设置盒子CSS高度、CSS宽度相同，再分别设置三个盒子里内容靠左对齐、居中对齐、靠右对齐。

我们都设置3个盒子高度为50px；宽度为300px；便于观察我们设置3个盒子都1个黑色边框样式。

1、HTML+CSS代码

1)、CSS代码

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left}

.div2{ width:300px; height:50px; border:1px solid #000; text-align:center}

.div3{ width:300px; height:50px; border:1px solid #000; text-align:right}

/*

div1 div2 div3 分别设置 靠左 居中 靠右对齐

*/

2)、HTML代码