🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] # 1. 前言 这里介绍一些概念性的常识。 # 2. 一些概念 ## 2.1 图层(Layer) 每次调用 canvas.drawXXX 系列函数,都会生成一个透明图层专门来绘 制这个图形,比如前面在绘制矩形时的透明图层就是这个概念。 ## 2.2 画布(Bitmap) 每块画布都是一个 Bitmap,所有的图像都是画在这个 Bitmap 上的。 我们知道,每次调用 canvas.drawXXX 系列函数,都会生成一个专用的透明图层来绘 制这个图形,绘制完成以后,就覆盖在画布上(我们调用 Canvas 的各种绘图函数,最终都是画在这个 Bitmap上的,而这个 Bitmap 就是默认画布。)。如果我们连续调用 5 个 draw 函 数,就会生成 5 个透明图层,画完之后依次覆盖在画布上显示。 画布有两种: * 一种是 View 的原始画布,是通过 onDraw(Canvas canvas)函数传入的,参数中的 canvas 对应 的是 View 的原始画布,控件的背景就是画在这块画布上的; * 另一种是人造画布,通 过 saveLayer()、new Canvas(bitmap)等函数来人为地新建一块画布。尤其是 saveLayer() 函数,一旦调用 saveLayer()函数新建一块画布,以后所有 draw 函数所画的图像都是画 在这块画布上的,只有在调用 restore()、resoreToCount()函数以后,才会返回到原始画 布上进行绘制。 ## 2.3 Canvas Canvas 是画布的表现形式,我们所要绘制的任何东西都是利用 Canvas 来实现的。在代码中,Canvas 的生成方式只有一种—— new Canvas(bitmap),即**只能通过 Bitmap 生成,无论是原始画布还是人造画布**,**所有的画布最后都是通过 Canvas 画到 Bitmap 上的**。**可以把 Canvas 理解成绘图的工具,利用它所封装的绘图函数来绘图, 而所要绘制的内容最后是画在 Bitmap 上的**。所以,如果我们利用 Canvas.clipXXX 系 列函数将画布进行裁剪,其实就是把它对应的 Bitmap 进行裁剪,与之对应的结果是以 后再利用 Canvas 绘图的区域会减小。