Canvas学习笔记(一)

185 阅读2分钟

之前没少接触Canvas,用游戏引擎开发过转场情景游戏,也用Canvas做过图片的压缩处理,每次都是用完就忘记了,因为一直没有系统性地查阅相关的API用法,知识没有形成系统。今天打算认真学习一下Canvas的相关知识。

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

canvas基本介绍

Canvas API 提供了一个通过JavaScript 和 HTML<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

  • 动画就不用说了,每隔一段时间更新画布即可。
  • 数据可视化是个比较常见的场景 d3echarts都使用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);

未完待续

感谢阅读,本系列会继续更新哦