之前没少接触Canvas,用游戏引擎开发过转场情景游戏,也用Canvas做过图片的压缩处理,每次都是用完就忘记了,因为一直没有系统性地查阅相关的API用法,知识没有形成系统。今天打算认真学习一下Canvas的相关知识。
这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战
canvas基本介绍
Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>
元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
- 动画就不用说了,每隔一段时间更新画布即可。
- 数据可视化是个比较常见的场景
d3
、echarts
都使用canvas
绘制一些图表 - 可用于图片的编辑(压缩、裁剪等)、视频处理(获取视频当前帧图像绘制到画布)
因此可以看到 Canvas还是很重要的。以上所有场景几乎都离不开一个接口:CanvasRenderingContext2D
,我们称为画布2d绘制上下文,下文统一简称为ctx。
我们今天主要介绍它的语法和用法。
CanvasRenderingContext2D常用的API
绘制矩形
canvas里有三种矩形:
- 透明矩形
- 填充矩形
- 描边矩形
分别对应了三种不同API的使用:
ctx.clearRect
通过把像素设置为透明以达到擦除一个矩形区域的目的
void ctx.clearRect(x, y, width, height);
ctx.fillRect
用于绘制填充矩形,通过fillStyle
属性设置矩形对的填充样式
void ctx.fillRect(x, y, width, height);
ctx.strokeRect
该方法用于绘制描边矩形(默认描边为1)
void ctx.strokeRect(x, y, width, height);
绘制文本
关于文本绘制,需要考虑几个要素:
- 给文本设置一定的宽度
- 给文本描边
- 绘制之前获取
占据有三个重要的基准, 文本
ctx.fillText
//注意 文本从x处开始绘制左边,以y点为文本的基线。因此(0,0)为起点可能无法正常显示文本
void ctx.fillText(text, x, y, [maxWidth]);
ctx.strokeText
绘制描边文本,很有趣的
void ctx.strokeText(text, x, y [, maxWidth]);
ctx.measureText
返回一个关于被测量文本TextMetrics
对象包含的信息(例如它的宽度)
ctx.measureText(text);
未完待续
感谢阅读,本系列会继续更新哦