canvas详解04-绘制文字

简介: canvas详解04-绘制文字

绘制文本


canvas 提供了两种方法来渲染文本:


fillText(text, x, y [, maxWidth])


在指定的 (x,y) 位置填充指定的文本,绘制的最大宽度是可选的。


strokeText(text, x, y [, maxWidth])


在指定的 (x,y) 位置绘制文本边框,绘制的最大宽度是可选的。


#一个填充文本的示例


文本用当前的填充方式被填充:


function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

目录
相关文章
|
JavaScript 前端开发 UED
JS实现绑定事件监听的几种方法详解
JS实现绑定事件监听的几种方法详解
481 0
解决使用-webkit-app-region后鼠标点击失败的问题
在开发中,如果我们想要实现窗口拖动的功能,可以通过给相应的元素设置 -webkit-app-region: drag 属性来实现。然而,这样做会引发一些问题,包括当前元素权级高于其他元素、无法触发鼠标相关事件以及双击全屏和还原窗口大小功能失效等。本文将介绍如何解决这些问题,实现既能拖动窗口又不影响窗口内部元素的需求。
2269 0
|
6月前
|
人工智能 测试技术 API
谁说 WebSocket 调试难?Windows 上的“秘密武器”都在这儿,速占先机
从 Apifox 这样集大成者,到 Websocat 这样专注于命令行极致体验的工具,再到 WebSocket King 的开源灵活,以及 Postman 的广泛适用性和 WebSocket.org Toolkit 的即时性,它们共同构成了 WebSocket 开发生态的重要支撑。
|
开发工具 git Windows
Git | 向GitHub提交代码超时处理
向GitHub提交代码超时处理
936 0
|
小程序
微信小程序wx.previewImage实现图片预览
微信小程序wx.previewImage实现图片预览
1671 0
|
前端开发 容器
css动画效果(边框线条流动效果)
css动画效果(边框线条流动效果)
|
并行计算 PyTorch 调度
Transformers 4.37 中文文档(十九)(1)
Transformers 4.37 中文文档(十九)
486 1
|
API PyTorch 算法框架/工具
PyTorch 2.2 中文官方教程(九)(3)
PyTorch 2.2 中文官方教程(九)
664 0
PyTorch 2.2 中文官方教程(九)(3)
|
JavaScript
在Vue中,如何在组件内部使用try/catch块来处理错误?
在Vue中,如何在组件内部使用try/catch块来处理错误?
1235 2
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
794 0

热门文章

最新文章