canvas 绘制文本和图像

最新推荐文章于 2025-05-16 07:34:02 发布

aganliang

最新推荐文章于 2025-05-16 07:34:02 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏：可视化文章标签： canvas

本文链接：https://blog.youkuaiyun.com/aganliang/article/details/114379612

可视化专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用 Canvas API 在网页上绘制文本和图像。详细解释了 fillText 和 strokeText 方法用于绘制文本，以及如何设置字体样式、对齐方式等。此外还介绍了如何通过 drawImage 方法将不同类型的图像源（如 HTMLImageElement、HTMLVideoElement 等）绘制到 Canvas 上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images

绘制文本

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

使用图像 Using images
canvas的API可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的<img>元素
HTMLVideoElement
用一个HTML的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 <canvas> 元素作为你的图片源。
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
这些源统一由 CanvasImageSource类型来引用。

Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制当向canvas画入时应该缩放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。