html5 canvas 文字居中对齐

最新推荐文章于 2025-02-04 11:29:06 发布

cclehui

最新推荐文章于 2025-02-04 11:29:06 发布

阅读量3.8w

点赞数

分类专栏： html5 文章标签： html5 HTML5 Html5

html5 专栏收录该内容

10 篇文章

订阅专栏

html部分

css部分

canvas{width:1000px;height:700px;}

js部分

初始的基本格式：

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();//给线条上色，即进行绘制

}

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

效果图：

HTML5 新技术 Canvas系列 —— 第一节基本介绍 - 独行冰海 - 独行冰海

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas画线</title>
</head>
<body>
    <canvas id="test" width=1000 height=700></canvas>
</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';//文本垂直方向，基线位置

举个例子。先看效果

代码：

 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);

接下来再用水平对齐，基线对齐两个属性，看看效果

1）对下面的 '使用canvas创建的文字——无填充'添加：水平居中对齐

draw.strokeStyle='#f00';

draw.textAlign='center'；//添加的一行代码

draw . strokeText ( '使用canvas创建的文字——无填充' , 50 , 120 );

效果如下：

如果改为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的位置

会产生另外的效果（这是代码的从上到下解析所造成的）

代码如下：

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);

效果如图：