canvas 绘制文本和图像

本文介绍了如何使用 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个则是定义切片的目标显示位置和大小。

### 提高HTML5 Canvas绘制文本的清晰度 #### 设置合适的缩放比例 为了确保在不同分辨率屏幕上显示的文字保持锐利,可以调整Canvas画布的比例。通过设置`devicePixelRatio`来匹配设备的实际像素密度: ```javascript function setupCanvas(canvas) { const context = canvas.getContext('2d'); const scale = window.devicePixelRatio; canvas.width = canvas.offsetWidth * scale; canvas.height = canvas.offsetHeight * scale; context.scale(scale, scale); } ``` 此方法能够有效提升文字渲染质量[^4]。 #### 使用抗锯齿属性 部分浏览器支持关闭默认的抗锯齿处理以获得更清晰的效果。可以通过CSS控制字体平滑程度: ```css canvas { image-rendering: crisp-edges; /* 防止图像被算法拉伸 */ shape-rendering: crispedges; /* SVG线条更加锋利 */ backface-visibility: hidden; /* 解决Webkit内核下3D变换引起的模糊 */ } ``` 同时,在JavaScript端也可以尝试禁用特定环境下的抗锯齿选项: ```javascript context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; ``` 这些措施有助于减少不必要的模糊现象[^2]。 #### 文本对齐方式的选择 适当选择文本基线(`textBaseline`)水平对齐(`textAlign`)参数也能改善视觉体验。例如,当顶部对齐时使用`top`作为基线值可使多行文本排列更为整齐美观: ```javascript context.textAlign = 'center'; context.textBaseline = 'middle'; // 绘制居中的单行或多行文本 const textWidth = context.measureText(text).width; context.fillText(text, centerX - (textWidth / 2), centerY); ``` 这种方法特别适用于需要精确布局的应用场景[^1]。 #### 动态适应屏幕尺寸变化 考虑到移动设备旋转或其他因素引起窗口大小改变的情况,建议监听resize事件并重新计算Canvas尺寸及内容位置: ```javascript window.addEventListener('resize', () => { setupCanvas(myCanvas); // 调整Canvas大小 redraw(); // 重绘所有图形元素 }); ``` 这一步骤保证了即使是在动态环境中也维持良好的阅读性交互性[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值