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

目录
相关文章
|
4月前
|
前端开发
|
8月前
|
自然语言处理 前端开发 API
改变canvas生成的图片中文本颜色
改变canvas生成的图片中文本颜色
|
4月前
|
前端开发
|
5月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
50 2
|
5月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
45 1
|
9月前
|
移动开发 前端开发 JavaScript
使用Canvas绘制图形和动画
使用Canvas绘制图形和动画
130 0
|
9月前
|
前端开发
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
前端 SVG 与 Canvas 框架案例 (画线、矩形、箭头、文字 ....)
107 0
|
10月前
|
前端开发 JavaScript
canvas:绘制视频封面
canvas:绘制视频封面
61 0
canvas:绘制视频封面
|
10月前
|
XML 前端开发 Java
用Canvas绘制一个数字键盘
用Canvas轻轻松松搞一个数字键盘,本身没什么难度,这种效果实现的方式也是多种多样,这篇只是其中的一种,要说本篇有什么特别之处,可能就是纯绘制,没有用到其它的任何资源,一个类就搞定了。
|
前端开发
canvas绘制五角星
canvas绘制五角星
147 0