SarEngine2D

Document

SarEngine2D Graphics

Graphics

绘图接口。封装自封装自Canvas的CanvasRenderingContext2D，在引擎中作为底层绘图接口。

由于高度封装自CanvasRenderingContext2D，该页面上的文档大部分内容直接复制自MDN。

Syntax

//from global 
var graphics = new Graphics(canvas);
//from SarEngine
var graphics = new SarEngine.Graphics(canvas);

Parameters

CanvasElement canvas
用于承载图像的HTML CanvasElement元素。

Classes

CompositeOperation
表示如何在已经存在的位图上绘制图形和图像的枚举类。
LineCap
线末端的枚举类。
LineJoin
定义两线相交拐点的枚举类。

Properties

canvas
CanvasElement 用于承载图像的HTML Canvas画布。
ctx
CanvasRenderingContext2D 用于承载图像的HTML Canvas画布的2D渲染接口。
fillStyle
图形内部的颜色和样式。 默认 #000 (黑色)。
font
字体设置。 默认值 10px sans-serif。
globalAlpha
在合成到画布之前，设置图形和图像透明度的值。默认 1.0 (不透明)。
globalCompositeOperation
通过 globalAlpha 应用，设置如何在已经存在的位图上绘制图形和图像。
height
渲染可视区域的高度，单位为像素。
kh
在调用底层绘图函数时与一切高度 height 相乘的系数。
kw
在调用底层绘图函数时与一切宽度 width 相乘的系数。
kx
在调用底层绘图函数时与一切横坐标 x 相乘的系数。
ky
在调用底层绘图函数时与一切纵坐标 y 相乘的系数。
lineCap
线末端的类型。 允许的值： butt (默认), round, square。
lineJoin
定义两线相交拐点的类型。允许的值：round, bevel, miter(默认)。
miterLimit
斜接面限制比例。默认 10。
shadowBlur
描述模糊效果。 默认 0。
shadowColor
阴影的颜色。 默认fully-transparent black。
shadowOffsetX
阴影水平方向的偏移量。 默认 0。
shadowOffsetY
阴影垂直方向的偏移量。 默认 0。
strokeStyle
图形边线的颜色和样式。 默认 #000 (黑色)。
strokeWidth
线的宽度。默认 1.0。
textAlign
文本对齐设置。 允许的值： start (默认), end, left, right 或 center。
textBaseline
基线对齐设置。 允许的值： top, hanging, middle, alphabetic (默认),ideographic, bottom。
width
渲染可视区域的宽度。单位为像素。

Methods

arc(x, y, r, sAngle, eAngle, antiCW)
绘制一段圆弧路径， 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据antiCW （默认为顺时针）指定的方向从 sAngle 开始绘制，到 eAngle 结束。
arcTo(x1, y1, x2, y2, r)
根据控制点和半径绘制圆弧路径，使用直线连接前一个点。
beginPath()
清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
添加一个3次贝赛尔曲线路径。该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。
clearRect(x, y, width, height)
设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容。
clip()
从当前路径创建一个剪切路径。在  clip() 调用之后，绘制的所有信息只会出现在剪切路径内部。
closePath()
使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
drawImage(img, sx, sy, swidth, sheight, x, y, width, height)
绘制指定的图片。该方法有多种格式，提供了很大的使用灵活性。
drawLine(x1, y1, x2, y2)
通过指定两个端点的坐标，使用当前样式绘制一条直线段。
fill()
使用当前的样式填充子路径。
fillRect(x, y, width, height)
绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height 。
fillRoundRect(x, y, width, height, r)
绘制填充圆角矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height ，圆角半径为 r 。
fillText(text, x, y, maxWidth)
在(x,y)位置填充文本。
isPointInPath(x, y)
判断当前路径是否包含检测点。
lineTo(x, y)
使用直线连接子路径的最后的点到x,y坐标。
measureText(text)
获取指定文本的相关测量值。
moveTo(x, y)
将一个新的子路径的起始点移动到(x，y)坐标。
quadraticCurveTo(cpx, cpy, x, y)
添加一个2次贝赛尔曲线路径。
rect(x, y, width, height)
创建一个矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。
rotate(rad, x, y)
绕定点旋转画布，若未指定x和y，默认绕原点旋转。
roundRect(x, y, width, height, r)
创建一个圆角矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height，圆角半径为 r 。
scale(scaleWidth, scaleHeight)
根据 x 水平方向和 y 垂直方向，为画布单位添加缩放变换。
setTransform(a, b, c, d, e, f)
重新设置当前的变换为指定的矩阵。
stroke()
使用当前的样式描边子路径。
strokeRect(x, y, width, height)
使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 width 、高度为 height 的矩形。
strokeRoundRect(x, y, width, height, r)
使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 width 、高度为 height 、圆角半径为 r 的矩形。
strokeText(text, x, y, maxWidth)
在(x,y)位置描边文本。
transform(a, b, c, d, e, f)
使用方法参数描述的矩阵与当前的变换矩阵相乘。
translate(x, y)
通过在网格中移动画布和画布原点 x 水平方向、原点 y 垂直方向，添加平移变换。