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

目录
相关文章
|
5月前
|
前端开发
|
3月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
3月前
|
前端开发
Canvas绘画之文本缩放并旋转
Canvas绘画之文本缩放并旋转
|
3月前
|
前端开发
Canvas背景色绘画样式设计
Canvas背景色绘画样式设计
|
4月前
|
前端开发
canvas与CreateJS实现图片动画
canvas与CreateJS实现图片动画
|
自然语言处理 前端开发 API
改变canvas生成的图片中文本颜色
改变canvas生成的图片中文本颜色
|
5月前
|
缓存 前端开发 JavaScript
canvas详解01-绘制基本图形
canvas详解01-绘制基本图形
88 2
|
5月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
71 1
|
5月前
|
前端开发
|
前端开发 JavaScript
canvas:绘制视频封面
canvas:绘制视频封面
88 0
canvas:绘制视频封面