怎么在HTML5中使用帆布对齐文本

  介绍

本篇文章给大家分享的是有关怎么在HTML5中使用帆布对齐文本,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>水平对齐textAlign

<李>

context.textAlign=,,,

其中各值及意义如下表。

值描述开始默认。文本在指定的位置开始指标文最终本在指定的位置结束.center文本的中心被放置在指定的位置.left文本左对齐,右文本右对齐。

我们通过一个例子来直观的感受一下。

<李>

& lt; ! DOCTYPE  html>,,

<李>

& lt; html  lang=比;,,

<李>

& lt; head>,,

<李>

,,,, & lt; meta  charset=比;,,

<李>

,,,, & lt; title> textAlign,,

<李>

,,,, & lt; style>,,

<李>

,,,,,,,, body {,背景:url(),重复,,},

<李>,

,

<李>

,,,, & lt;/style>,,

<李>

& lt;/head>,,

<李>

& lt; body>,,

<李>

& lt; div  id=比;,,

<李>

,,,, & lt; canvas  id=比;,,

<李>

,,,,,,,,你的浏览器居然不支持画布? !赶快换一个吧! !,,

<李>

,,,, & lt;/canvas>,,

<李>

& lt;/div>,,

<李>,

,

<李>

& lt; script>,,

<李>

,,,, window.onload =, () {,,

<李>

,,,,,,,,, canvas =, . getelementbyid ();,,

<李>

,,,,,,,, canvas.width =, 800;,,

<李>

,,,,,,,, canvas.height =, 600;,,

<李>

,,,,,,,,, context =, canvas.getContext ();,,

<李>

,,,,,,,, context.fillStyle =,;,,

<李>

,,,,,,,, context.fillRect (0, 0800600);,,

<李>,

,

<李>

,,,,,,,,,,

<李>

,,,,,,,, context.strokeStyle=;,,

<李>

,,,,,,,, context.moveTo (400100);,,

<李>

,,,,,,,, context.lineTo (400500);,,

<李>

,,,,,,,, context.stroke ();,,

<李>,

,

<李>,

,

<李>

,,,,,,,, context.fillStyle =,;,,

<李>

,,,,,,,, context.font=;,,

<李>,

,

<李>

,,,,,,,,,,

<李>

,,,,,,,, context.textAlign=;,,

<李>

,,,,,,,, context.fillText (, 400,, 120);,,

<李>

,,,,,,,, context.textAlign=;,,

<李>

,,,,,,,, context.fillText (, 400,, 200);,,

<李>

,,,,,,,, context.textAlign=;,,

<李>

,,,,,,,, context.fillText (, 400,, 280);,,

<李>

,,,,,,,, context.textAlign=;,,

<李>

,,,,,,,, context.fillText (, 400,, 360);,,

<李>

,,,,,,,, context.textAlign=;,,

<李>

,,,,,,,, context.fillText (, 400,, 480);,,

<李>

,,,,};,,

<李>

& lt;/script>,,

<李>

& lt;/body>null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

怎么在HTML5中使用帆布对齐文本