# Zjbcool-canvas插件教程

在拼图环境下,通过原生的HTML分类下的create canvas elem拼图可以创建canvas纹理,然后,通过Material分类下的replace texture拼图可以将canvas纹理指定给材质球。但是在原生拼图中并没有提供绘制canvas纹理的方法,我们需要使用JavaScript借助Canvas API进行绘制。canvas插件解决了需要代码绘制canvas纹理的问题。

canvas插件可以实现的功能非常广泛。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。详见MDN Canvas API (opens new window)。下面我们通过案例 (opens new window)了解插件的使用方法。

# 基础

# 坐标系

canvas插件采用和浏览器相同的坐标系,坐标原点(0,0)在贴图的左上角,x轴和y轴的正方向分别朝右和朝下。

# 材质准备

由于canvas纹理要通过replace texture拼图指定给材质,所以要求材质上要有可以代替的贴图节点。

# 画布的尺寸

虽然canvas纹理有不错的性能,但是和普通贴图一样,canvas纹理的尺寸越大,性能消耗越大。推荐的尺寸是1024*1024,保持2的N次方。

# 绘制笑脸

使用canvas插件绘制纹理的过程相当于拿起画笔在画布上画画一样。

# 新建画布

首先,我们使用原生的HTML分类下的create canvas elem拼图新建一张canvas画布,尺寸为1024px*1024px,并将它保存到变量C。然后,使用Material分类下的replace texture拼图将画布作为贴图指定给材质球。如图:

mark

# 获取画笔和设置样式

开始画画之前,我们需要先拿起画笔。使用get context拼图获取canvas画布的上下文,这一步相当于拿起画笔。

接着,我们来设置样式,这一步相当于调色。使用set prop拼图可以设置多种样式,在这里,我们先设置填充色(fillStyle)、描边色(strokeStyle)、线帽(lineCap)、线宽(lineWidth)。如图:

mark

# 清空画布和设置背景

默认画布的背景是黑色,我们想把它变成上一步设置的填充色。可以使用draw rect拼图中的fillRect方法,从(0,0)的位置开始,宽高均为1024px,使用填充色填充整块画布。如图:

mark

# 绘制外圈

接下来就开始画笑脸了。我们先画出最外面的圆的路径。使用custom path拼图中的circle方法可以画一个正圆。圆心的位置在画布的中心点(512,512),半径为256。如图:

mark

# 绘制嘴

先使用path method拼图的moveTo方法将画笔移动到右侧嘴角的位置,坐标是(672,512)。然后使用path method拼图的arc方法绘制出一个半圆。arc方法和上一步中的cirle方法类似,只是多出开始角度和结束角度两个参数,分别设置为0度和180度,就可以画出半圆。如图:

mark

# 绘制眼睛

我们使用同样的方法可以绘制出两只眼睛。如图:

mark

# 描边路径

前面从绘制外圈到眼睛只是绘制了笑脸的路径,此时画布上还是纯白色的。想要呈现笑脸,要使用draw path拼图的stroke方法描边路径。由于我们前面设置了描边颜色,所以此时画布上会出现一个蓝色线条的笑脸。

mark

这个案例展示了canvas插件绘制纹理的过程,它是不是和photoshop的钢笔工具有点像呢?

# 绘制文字

使用canvas插件可以绘制样式美观的文字,下面我们来实现带有渐变和阴影效果的文字。

# 初始设置

和绘制笑脸案例一样,绘制之前我们要做以下工作:

  1. 新建画布;
  2. 将画布指定到材质球上;
  3. 获取画布上下文;
  4. 设置背景。

mark

# 创建渐变色

我们先为文字准备一个线性渐变。使用create gradient拼图创建渐变,类型为线性(linear),起止点分别为画布的左上角(0,0)和右上角(1024,0),这样就能创建一个水平方向的线性渐变。

然后使用add color stop拼图设置色标颜色。offset参数用来设置色标的位置,取值范围是0-1。

定义好渐变色之后,要通过set prop拼图把它设置为填充色(fillStyle)。

mark

# 设置阴影

通过set prop拼图设置阴影的颜色、模糊度、X轴偏移值和Y轴偏移值。

mark

# 设置文字属性和绘制文字

通过set prop拼图设置文字的对齐、字体/字号、基线属性。

通过draw text拼图在画布上绘制文字。

mark

最终效果:

mark

# 绘制图案

前面我们把渐变色设置为填充色,同样我们还可以把图案设置为填充色。

要创建图案,首先要通过load image拼图和loaded image拼图从本地加载一张图片,然后将加载的图片用于create pattern拼图。

我们还可以使用transform pattern拼图对图案进行变换。

mark

最终效果:

mark

# 绘制图片

这个案例和下个案例里面我们要介绍画布的变换和draw image拼图。

# 变换

canvas画布的变换(transform拼图),即移动、旋转、缩放,针对的是整块画布,并非某个图形。假如我们在画布中心画了一个正方形,然后想以正方形中心为轴旋转或缩放,这时你会发现,轴心并不在正方形中心,而是在画布的左上角。

要纠正轴心,沿图形中心旋转或缩放,可以使用以下方法:

  1. 将画布移动到图形的中心点;
  2. 旋转/缩放画布;
  3. 将画布逆向移回;

在一块1024px*1024px的画布上,沿画布中心旋转或缩放,如图:

mark

另外,canvas插件提供了一个state拼图,它包含saverestore两个方法,用来保存和恢复画布的状态。变换操作会改变画布状态,使用state拼图可以保持画布的正常状态。变换画布的完整操作步骤如下:

  1. 保存(save)画布状态;
  2. 将画布移动到图形的中心点;
  3. 旋转/缩放画布;
  4. 将画布逆向移回;
  5. 恢复(restore)画布状态。

拼图如下:

mark

# 绘制图片

使用draw image拼图可以将图片和视频绘制到纹理上。

执行如下拼图时,这块绘有图片的画布(512px*512px)会以中心点(256,256)为轴旋转135度。

mark

# 精灵图动画

精灵图是在一张图片上平铺了一组循环的动画序列帧。精灵图动画是将精灵图上的序列帧逐格呈现出来的动画手段,常用于游戏开发。如下图:

mark

使用canvas插件能轻松实现精灵图动画,实现一些特殊效果,如Verge3D工业机器人案例 (opens new window)中的电焊火光效果。

mark

拼图并不复杂,我们逐行解释——

  1. 使用set timer拼图设置动画的时间间隔,每0.1秒执行一次,无限循环。
  2. 变量i用来标记精灵图的长度,这张精灵图包含5个动画帧,所以当i为5时,需要将i重置为0,以使其不断循环;否则,i递增。
  3. 使用draw rect拼图的clearRect方法清空画布。绘制动画,就是不断重复清除画面-绘制画面的过程。
  4. 使用draw image拼图绘制精灵图。通过拼图上的齿轮图标打开高级设置,会增加新的参数,其中sx和sy表示源图片的位置,我们利用sx参数来切换动画帧的位置。sWidth和sHeight表示源图片的大小,这里是指精灵图上动画帧的大小。dx和dy表示画布的位置,dWidth和dHeight表示画布的大小。
  5. 最后,使用set needsUpdate,设置更新纹理。当有动画或需要实时绘制时,都需要更新纹理。

# 最后

canvas插件能够实现的其它功能,见示例:

绘图程序 (opens new window)

实时抠绿 (opens new window)

自定义相册 (opens new window)

上次更新: 2021-5-20 16:17:56