html5 canvas 文字居中对齐

[color=eight:25px]htML部门

[color=eight:25px]canvas id="myCanvas"> /canvas>

[color=eight:25px]css部门

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

[color=eight:25px]js部门
初初的根本格局：
[color=eight:25px]window.onload=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]
代码以下：

  !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'; //文本垂曲标的目的，基线位置

[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]

[color=eight:25px]html部门

[color=eight:25px]canvas id="myCanvas"> /canvas>

[color=eight:25px]css部门

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

[color=eight:25px]js部门
初初的根本格局：
[color=eight:25px]window.onload=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]
代码以下：

  !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'; //文本垂曲标的目的，基线位置

[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]

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！