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);
}

目录
相关文章
|
6月前
|
前端开发
canvas绘制圆环
canvas绘制圆环
|
4月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
4月前
|
前端开发
width展示的是在Canvas画布上的字符串‘Hello‘的宽度
width展示的是在Canvas画布上的字符串‘Hello‘的宽度
|
5月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
|
6月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
105 2
|
6月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
84 1
|
6月前
|
前端开发
|
前端开发 JavaScript
canvas:绘制视频封面
canvas:绘制视频封面
94 0
canvas:绘制视频封面
|
前端开发
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
138 0
|
XML 前端开发 Java
用Canvas绘制一个数字键盘
用Canvas轻轻松松搞一个数字键盘,本身没什么难度,这种效果实现的方式也是多种多样,这篇只是其中的一种,要说本篇有什么特别之处,可能就是纯绘制,没有用到其它的任何资源,一个类就搞定了。
113 0