# Zjbcool-canvas
Canvas插件提供了一系列可以在Verge3D场景中绘制图形的拼图。
在绘制之前，首先需要使用原生的HTML分类下的create canvas拼图新建一个空的canvas画布，然后使用原生的Mateials分类下的replace texture拼图将其指定到材质上。接下来就可以使用插件进行绘制了。
根据功能该类拼图可以分为6组：
# get context
新建画布后，需要通过get context拼图获取该canvas画布的上下文，进入绘图模式（获取画笔），然后才能使用插件的其它拼图进行绘制。
# set needsUpdate
当画布内容发生改变时，Verge3D并不知道何时需要更新材质，因此需要通过该拼图发出更新通知。设置值为true，即更新材质，否则为不更新。默认为true。
# drawing assistant
绘图助手提供了在三维环境下绘制二维图形时需要的辅助。
grid网格可以在画布上显示标尺和网格。
info可以在鼠标旁边显示光标所在的坐标。
该拼图还会返回鼠标在画布上的位置信息，这对于实现实时绘图功能非常有用。位置信息可以通过get coord拼图获得。
# get coord
获取由drawing assistant生成的鼠标在画布上的位置信息。
# save canvas
保存绘制后的canvas画布，支持保存为jpg/png格式。可以使用原生的HTML分类下download file拼图下载图片。
# path method
该拼图提供了一组绘制路径的方法。在画布上绘制图形首先需要绘制路径，然后对路径进行描边或填充。
在绘制一条新的路径时，首先需要用到begin path方法，相应的，在结束时要使用close path方法。
add path方法可以将一条路径合并到另一条路径之下。
move to方法可以将画笔移动到画布的指定位置（x,y）。
line to方法是从画笔位置到目标位置绘制直线。
bezierCurveTo方法是绘制三次贝赛尔曲线路径的方法。 该方法需要3个点。 第1、2个点是控制点，第3个点是结束点。起始点是当前路径的最后一个点，可以通过moveTo方法进行修改。
quadraticCurveTo方法是绘制二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点，第二个点是终点。 起始点是当前路径的最后一个点，可以使用 moveTo方法进行修改。
arc方法是绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，按顺时针方向从 startAngle 开始绘制，到 endAngle 结束。
arcTo方法根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等方法的结束点)。根据当前描点与给定的控制点1连接的直线，和控制点1与控制点2连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
参考： https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arcTo (opens new window)
ellipse方法是绘制椭圆路径的方法。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY ，按照顺时针的方向，从 startAngle 开始绘制，到 endAngle 结束。
参考： https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/ellipse (opens new window)
rect方法是绘制矩形路径的方法，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。
# custom path
该拼图提供一组复合路径：圆形、圆角矩形、箭头。
# create path2d
创建一个新的Path2d对象。
# is point in
判断一个点是否在路径或描边内。
# set prop
该拼图用于为画布指定样式，包括填充色、描边色、字体、线型、全局透明度、阴影等。
# set line dash
设置虚线样式。它的参数是一个列表（数组），一组描述交替绘制线段和间距（坐标空间单位）长度的数字。
# create pattern
从指定图片创建图案。它可以用于填充色样式。
# create gradient
创建渐变色，包括线性的径向两方式。它可以用于填充色样式。
# add color stop
为渐变终点设置颜色。
# draw path
绘制路径的方法，包括填充、描边、裁剪路径。
# draw rect
绘制矩形的方法，包括填充、描边、清除。
# draw text
绘制文字的方法，包括填充和描边。
# load image
从本地或远程服务器加载图片。通过loaded image接收加载的图片。
# loaded image
返回通过load image加载的图片。
# draw image
将图片绘制到画布。
# get image data
获取图片数据。返回一个ImageData对象。
# put image data
将一个ImageData对象绘制到画布。
# state
保存和恢复当前画布的绘制状态。绘制状态有下面部分组成：
- 当前的变换矩阵。
- 当前的剪切区域。
- 当前的虚线列表。
- 以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.
# transform
画布的变换操作，包括移动、旋转和缩放。注意，canvas画布中变换不是针对图形，而针对当前状态下的画布。所以任何变换操作的原点都是画布左上角{x:0, y:0}的位置。
如果要在某个图形的中心点进行变换，会稍微有些复杂。需要先保存当前状态，然后移动画笔到图形的中心点位置，先变换画布，再绘制图形，最后再将画笔移回，并恢复画布状态。
# transform pattern
变换图案。