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

目录
相关文章
|
7月前
|
前端开发
canvas绘制圆环
canvas绘制圆环
|
5月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
6月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
|
自然语言处理 前端开发 API
改变canvas生成的图片中文本颜色
改变canvas生成的图片中文本颜色
|
7月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
130 2
|
7月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
99 1
|
7月前
|
前端开发
|
前端开发 JavaScript
canvas:绘制视频封面
canvas:绘制视频封面
98 0
canvas:绘制视频封面
|
前端开发
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
140 0
|
前端开发
canvas绘制五角星
canvas绘制五角星
190 0