CraftyJS 学习五 -- Text

时间:2022-06-26
本文章向大家介绍CraftyJS 学习五 -- Text ，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

文本

创建 "Text":

var helloWorldText = Crafty.e('2D, DOM, Text')
  .attr({
    x: 10,
    y: 10
  });

显示文本:

helloWorldText.text('Hello World');

样式

使用 .textColor() 方法修改文本颜色: 

helloWorldText.textColor('red');

使用.textFont() 方法调整字体样式:

helloWorldText.textFont({
  size: '20px',
  weight: 'bold'});

支持的类型包括:

  • type
  • weight
  • size
  • family
  • lineHeight
  • variant

2D 属性

注意:

  • 文本可在 Canvas 和 DOM 层上. 但是 DOM 的渲染能力更强。
  • Canvas 上的 文本会自动设定高度及宽度.

随机文章
Javascript知识点必读
最近更新