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 属性

注意:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Unity游戏开发

Unity-UI(UGUI详解)02.1 Canvas组件、Visual组件

Canvas组件代表UI被放置和渲染的虚拟空间。全部的UI元素必须是带有Canvas组件的Gameobject的子物体。当我们创建一个UI元素从菜单的时候,如果...

21310
来自专栏Unity游戏开发

Unity-UI(UGUI详解)01基础概念、自动布局、动画集成、富文本

Canvas应该包含全部UI元素,全部的UI元素应该时Canvas的子物体 调整元素的显示顺序可以从Hierarchy中直接拖拽他们,顺序从也可以被控制通过S...

19730
来自专栏生南星

面试简书(五)

用PS打开图片,点击点击“文件”——“存储为Web所用格式”将图片存储为Web所用格式,点击“存储”。

6710
来自专栏深圳java培训

深圳Java培训:使用JS实现简单喷泉效果

最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下:

7200
来自专栏汪宇杰博客

打造一把UWP像素尺

在特定应用里,我们需要用标尺来标识屏幕上的像素。然而唯一内置的尺是在InkToolbar控件里的,我们没法拿出来用。今天我就教大家如何自己打造一把UWP引用里随...

8420
来自专栏某熊的全栈之路

fc-whiteboard,支持镜像、录播、回放的 Web 电子白板

在很多培训、协作、在线演讲的场景下,我们需要有电子白板的功能,能够方便地在演讲者与听众之间共享屏幕、绘制等信息。fc-whiteboard https://pa...

15220
来自专栏计算机图形学 前端可视化 WebGL

FireFox下Canvas使用图像合成绘制SVG的Bug

所有的事情都会有一个起因。 最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的技术。于是我把之前写好的两种...

9900
来自专栏腾讯技术工程官方号的专栏

卡牌特效: svg不规则倒计时动效

? 导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,...

17830
来自专栏Unity游戏开发

Unity-Optimizing Unity UI(UGUI优化)01 导航、Unity UI的基础概念与原理

摘要: 通过Unity UI优化用户的界面驱动是一门艺术,以下将讨论基本的概念、算法和在Unity UI相关代码

14620
来自专栏计算机图形学 前端可视化 WebGL

FireFox下Canvas使用图像合成绘制SVG的Bug

所有的事情都会有一个起因。 最近产品上需要做一个这样的功能:给一些图形进行染色处理。想想这还不是顺手拈来的事情,早就研究过图形染色的技术。于是我把之前写好的两种...

6010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励