HTML5 canvas 基本语法

2020-04-21 22:46:46易采站长站整理
textAlign:文字水平对齐方式。可取属性值:
start
,
end
,
left
,
right
,
center
。默认值:
start
.
textBaseline
:文字竖直对齐方式。可取属性值:
top
,
hanging
,
middle
,
alphabetic
,
ideographic
,
bottom
。默认值:
alphabetic
.

有两个方法可以绘制文字:

fillText
strokeText
。第一个绘制带 fillStyle 填充的文字,后者绘制只有 strokeStyle 边框的文字。两者的参数相同:要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。

下面是一个在 canvas 中绘制"hello world" 文字的例子

context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

图 5 是其效果图。

Example text render.

图 5: 文字效果

阴影

目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为:

shadowColor
:阴影颜色。其值和 CSS 颜色值一致。
shadowBlur
:设置阴影模糊程度。此值越大,阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
shadowOffsetX
shadowOffsetY
:阴影的 x 和 y 偏移量,单位是像素。

下面是 canvas 阴影的例子:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);

其效果见图 6。