context对象可以设置以下 text 属性:
[color=indigo][b]font[/b][/color]:文字字体,同 CSSfont-family 属性
[color=indigo][b]textAlign[/b][/color]:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
[color=indigo][b]textBaseline[/b][/color]:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic
[b]有两个方法可以绘制文字[/b]: fillText和 strokeText。第一个绘制带 fillStyle 填充的文字,后者绘制只有 strokeStyle 边框的文字。两者的参数相同:要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。
下面是一个在 canvas 中绘制”hello world” 文字的例子
• [color=red]context.fillStyle[/color] = ‘#00f’;
• [color=red]context.font[/color] = ‘italic 30px sans-serif’;
• [color=red]context.textBaseline[/color] = ‘top’;
• [color=red]context.fillText[/color] (‘Hello world!’, 0, 0);
• [color=red]context.font[/color] = ‘bold 30px sans-serif’;
• [color=red]context.strokeText(‘Hello world!’, 0, 50);[/color]
阴影
目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为
[b]shadowColor[/b]:阴影颜色。其值和 CSS 颜色值一致。
[b]shadowBlur[/b]:设置阴影模糊程度。此值越大,阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
[b]shadowOffsetX 和 shadowOffsetY[/b]:阴影的 x 和 y 偏移量,单位是像素。
下面是
canvas 阴影的例子:
• [color=red]context.shadowOffsetX[/color] = 5;
• [color=red]context.shadowOffsetY[/color] = 5;
• [color=red]context.shadowBlur[/color] = 4;
• [color=red]context.shadowColor[/color] = ‘rgba(255, 0, 0, 0.5)’;
• [color=red]context.fillStyle[/color] = ‘#00f’;
• context.fillRect(20, 20, 150, 100);
[color=indigo][b]font[/b][/color]:文字字体,同 CSSfont-family 属性
[color=indigo][b]textAlign[/b][/color]:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
[color=indigo][b]textBaseline[/b][/color]:文字竖直对齐方式。可取属性值:top, hanging, middle,alphabetic, ideographic, bottom。默认值:alphabetic
[b]有两个方法可以绘制文字[/b]: fillText和 strokeText。第一个绘制带 fillStyle 填充的文字,后者绘制只有 strokeStyle 边框的文字。两者的参数相同:要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话,浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。
下面是一个在 canvas 中绘制”hello world” 文字的例子
• [color=red]context.fillStyle[/color] = ‘#00f’;
• [color=red]context.font[/color] = ‘italic 30px sans-serif’;
• [color=red]context.textBaseline[/color] = ‘top’;
• [color=red]context.fillText[/color] (‘Hello world!’, 0, 0);
• [color=red]context.font[/color] = ‘bold 30px sans-serif’;
• [color=red]context.strokeText(‘Hello world!’, 0, 50);[/color]
阴影
目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为
[b]shadowColor[/b]:阴影颜色。其值和 CSS 颜色值一致。
[b]shadowBlur[/b]:设置阴影模糊程度。此值越大,阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
[b]shadowOffsetX 和 shadowOffsetY[/b]:阴影的 x 和 y 偏移量,单位是像素。
下面是
canvas 阴影的例子:
• [color=red]context.shadowOffsetX[/color] = 5;
• [color=red]context.shadowOffsetY[/color] = 5;
• [color=red]context.shadowBlur[/color] = 4;
• [color=red]context.shadowColor[/color] = ‘rgba(255, 0, 0, 0.5)’;
• [color=red]context.fillStyle[/color] = ‘#00f’;
• context.fillRect(20, 20, 150, 100);