在 HTML canvas 绘制文本

简介: 在 HTML canvas 绘制文本

绘制文本有两种方式:

fillText(text, x, y)
strokeText(text, x, y)

下面,我们来看看如何在 canvas 上绘制文本。

我们先创建一个 canvas 标签,并设置基本的宽高:

<canvas width="200" height="400"></canvas>

首先,获取对画布的引用:

const canvas = document.querySelector('canvas')

并从中创建一个上下文对象:

const ctx = canvas.getContext('2d')
getContext() 方法根据作为参数传递的类型返回画布上的绘图上下文。

有效值为:

2d 二维渲染上下文
webgl 使用 WebGL 版本 1
webgl2 使用 WebGL 版本 2
与 ImageBitmap 一起使用的 bitmaprenderer
点击此处查看详细内容。

现在我们可以调用 ctx 对象的 fillText() 方法:

ctx.fillText('Hello, Canvas!', 100, 100)
fillText 方法的后两个参数分别为 x 和 y 的坐标。

在调用 fillText() 之前,还可以传递其他属性来自定义外观,例如:

ctx.font = 'bold 20pt Menlo'
ctx.fillStyle = '#ccc'
ctx.fillText('Hello, Canvas!', 100, 100)

font 属性更改字体样式
fillStyle 属性更改图形的填充颜色。默认值是 #000。
如果画布看起来太小,你可以设置它的 width 和 height 属性:

ctx.width = 600
ctx.height = 600

另一种绘制文本的方式:

ctx.strokeStyle = '#ccc'
ctx.strokeText('Hello, Canvas!', 100, 100)

strokeStyle 属性更改图形的描边颜色。默认值是 #000。

fillStyle 和 strokeStyle 接受任何有效的 CSS 颜色,包括字符串和 RGB 计算。

您还可以更改与文本(* = default)相关的其他属性:

  • textAlign: start*, end, left, right, center — 文本的对齐方式
  • textBaseline: top, hanging, middle, alphabetic*, ideographic, bottom — 文本基线
  • direction: ltr | rtl | inherit* — 文本方向
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
71 0
|
16天前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
16天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
27天前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
28 12
|
1月前
|
搜索推荐 索引 SEO
HTML 文本格式化对于搜索引擎优化(SEO)
HTML文本格式化是搜索引擎优化(SEO)的关键,合理的格式化有助于搜索引擎理解网页内容,提升排名。主要技巧包括:使用正确的标题标签、组织段落和列表、自然融入关键词、优化图像及链接,并使用语义化标签和Meta标签。遵循这些最佳实践,可以显著提高SEO效果,吸引更多访客。
|
13天前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
2月前
|
Dart 前端开发 Java
|
2月前
|
移动开发 前端开发 JavaScript
|
3月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
3月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法