canvas提供了使用画布进行2D画图的支持,可用于简单的小游戏开发或者图片编辑。使用canvas可以轻松地在一张图片或一个界面上绘制各种线与图形。
canvas的坐标系为平面直角坐标系,以控件左上角为原点,控件上边沿为x轴正方向,控件左边沿为y轴正方向。例如分辨率为1920*1080的屏幕上,canvas控件覆盖全屏,画一条从屏幕左上角到屏幕右下角的线段为:
canvas.drawLine(0, 0, 1080, 1920, paint);
canvas的绘制依赖于画笔Paint, 通过设置画笔的粗细、颜色、填充等可以改变绘制出来的图形。例如绘制一个红色实心正方形为:
var paint = new Paint();
//设置画笔为填充,则绘制出来的图形都是实心的
paint.setStyle(Paint.STYLE.FILL);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);
如果要绘制正方形的边框,则通过设置画笔的Style来实现:
var paint = new Paint();
//设置画笔为描边,则绘制出来的图形都是轮廓
paint.setStyle(Paint.STYLE.STROKE);
//设置画笔颜色为红色
paint.setColor(colors.RED);
//绘制一个从坐标(0, 0)到坐标(100, 100)的正方形
canvas.drawRect(0, 0, 100, 100, paint);
结合画笔,canvas可以绘制基本图形、图片等。
- 返回 {number}
返回画布当前图层的宽度。
- 返回 {number}
返回画布当前图层的高度。
r
{number} 红色通道值g
{number} 绿色通道值b
{number} 蓝色通道值
将整个可绘制区域填充为r、g、b指定的颜色。相当于 canvas.drawColor(colors.rgb(r, g, b))
。
a
{number} 透明通道值r
{number} 红色通道值g
{number} 绿色通道值b
{number} 蓝色通道值
将整个可绘制区域填充为a、r、g、b指定的颜色。相当于 canvas.drawColor(colors.argb(a, r, g, b))
。
color
{number} 颜色值
将整个可绘制区域填充为color指定的颜色。
color
{number} 颜色值mode
{PorterDuff.Mode} Porter-Duff操作
将整个可绘制区域填充为color指定的颜色。
paint
{Paint} 画笔
将整个可绘制区域用paint指定的画笔填充。相当于绘制一个无限大的矩形,但是更快。 通过该方法可以绘制一个指定的着色器的图案。
x
{number} x坐标y
{number} y坐标paint
{Paint} 画笔
在可绘制区域绘制由坐标(x, y)指定的点。 点的形状由画笔的线帽决定(参见paint.setStrokeCap(cap))。 点的大小由画笔的宽度决定(参见paint.setStrokeWidth(width))。
如果画笔宽度为0,则也会绘制1个像素至4个(若抗锯齿启用)。
相当于 canvas.drawPoints([x, y], paint)
。
pts
{Array} 点坐标数组 [x0, y0, x1, y1, x2, y2, ...]paint
{Paint} 画笔
在可绘制区域绘制由坐标数组指定的多个点。
startX
{number} 起点x坐标startY
{number} 起点y坐标endX
{number} 终点x坐标endY
{number} 终点y坐标paint
{Paint} 画笔
在可绘制区域绘制由起点坐标(startX, startY)和终点坐标(endX, endY)指定的线。 绘制时会忽略画笔的样式(Style)。也就是说,即使样式设为“仅填充(FILL)”也会绘制。 退化为点的线(长度为0)不会被绘制。
r
{Rect} 矩形边界paint
{Paint} 画笔
在可绘制区域绘制由矩形边界r指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。
left
{number} 矩形左边界x坐标top
{number} 矩形上边界y坐标right
{number} 矩形右边界x坐标bottom
{number} 矩形下边界y坐标paint
{Paint} 画笔
在可绘制区域绘制由矩形边界(left, top, right, bottom)指定的矩形。 绘制时画笔的样式(Style)决定了是否绘制矩形界线和填充矩形。
canvas.drawArc(android.graphics.RectF oval, float startAngle, float sweepAngle, boolean useCenter, android.graphics.Paint paint)
canvas.drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, android.graphics.Paint paint)
canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, android.graphics.Paint paint)
canvas.drawBitmap(android.graphics.Bitmap bitmap, float left, float top, android.graphics.Paint paint)
canvas.drawTextOnPath(java.lang.String text, android.graphics.Path path, float hOffset, float vOffset, android.graphics.Paint paint)
dx
{number} 向x轴正方向平移的距离,负数表示反方向平移dy
{number} 向y轴正方向平移的距离,负数表示反方向平移
平移指定距离。
sx
{number} 向x轴正方向平移的距离,负数表示反方向平移sy
{number} 向y轴正方向平移的距离,负数表示反方向平移
以原点为中心,将坐标系平移缩放指定倍数。