CanvasRenderingContext2D

支持最低平台版本号'1040' (minPlatformVersion>='1040')

OPPO小游戏 Runtime 实现了web标准中支持游戏所需要的 canvas 部分功能(字体渲染),以下是已经实现的属性和方法:

示例代码:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#ff00ff";
ctx.font = "15px Arial";
ctx.fillText("text test", 10, 10);

属性

width

绘图buffer宽

height

绘图buffer高

lineWidth

线的宽度。默认 1.0

font

字体设置。 默认值 10px sans-serif.

textAlign

文本对齐设置。 允许的值: start (默认), end, left, right 或 center.

textBaseline

基线对齐设置。 允许的值: top, middle, alphabetic (默认), bottom.

fillStyle

图形内部的颜色和样式。 默认 #000 (黑色).

stokeStyle

图形边线的颜色和样式。 默认 #000 (黑色).

miterLimit

斜接面限制比例。不允许的值:0、负数、Infinity 、 NaN .

下面的属性支持最低平台版本号'1044' (minPlatformVersion>='1044')

lineCap

指定如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt, round and square。默认值是 butt.

lineJoin

用来设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略).

lineDashOffset

虚线偏移量

shadowColor

阴影颜色

shadowOffsetX

阴影X轴偏移

shadowOffsetY

阴影Y轴偏移

shadowBlur

阴影模糊,如果值为0会移除阴影效果

globalAlpha

绘图的透明度,范围: 0.0 到 1.0

globalCompositeOperation

绘制新形状时应用的合成操作的类型,类型包括:xor, source-atop, source-over, destination-out, destination-over, screen, overlay, darken, lighten,不支持类型:lighter, copy,与H5存在差异: source-in, source-out, destination-atop, destination-in

方法

CanvasRenderingContext2D.beginPath()

清空子路径列表开始一个新的路径。当你想创建一个新的路径时,调用此方法。

CanvasRenderingContext2D.moveTo(x, y)

将一个新的子路径的起始点移动到(x,y)坐标。

CanvasRenderingContext2D.lineTo(x, y)

使用直线连接子路径的最后的点到x,y坐标(并不会真正地绘制)。

CanvasRenderingContext2D.closePath()

使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点,那么此方法不会做任何操作。

CanvasRenderingContext2D.stroke()

使用当前的样式描边子路径。

CanvasRenderingContext2D.fill()

填充当前的绘图(路径)。

CanvasRenderingContext2D.fillRect(x, y, width, height, style)

绘制填充矩形。矩形的起点在(x,y)位置,矩形的尺寸是 width 和 height,style 属性决定矩形的样式。

CanvasRenderingContext2D.fillText(text, x, y[, maxWidth])

在(x,y)位置绘制(填充)文本。

CanvasRenderingContext2D.strokeText(text, x, y)

在(x,y)位置绘制(描边)文本。

CanvasRenderingContext2D.strokeRect(x, y, width, height)

绘制描边矩形。矩形的起点在(x,y)位置,矩形的尺寸是 width 和 height。

CanvasRenderingContext2D.measureText(text)

测量文本的尺寸,返回文本的尺寸信息。(目前只计算了字体的宽度)。

CanvasRenderingContext2D.createImageData(width, height)

CanvasRenderingContext2D.createImageData(imagedata)

指定了宽度和高度的,新的 ImageData 对象。

CanvasRenderingContext2D.getImageData(x,y,width,height)

返回一个 ImageData 对象。

CanvasRenderingContext2D.putImageData(imagedata, dx, dy)

CanvasRenderingContext2D.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

数据从已有的 ImageData 对象绘制到位图的方法。

CanvasRenderingContext2D.quadraticCurveTo(cpx, cpy, x, y)

通过控制点和终点绘制二次贝塞尔曲线。

CanvasRenderingcontext2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

通过控制点和终点绘制三次贝塞尔曲线。

CanvasRenderingContext2D.rotate(angle)

指定角度进行顺时针的旋转。

CanvasRenderingContext2D.translate(x,y)

根据 X 水平方向和 y 垂直方向进行平移变换。

CanvasRenderingContext2D.transform(a,b,c,d,e,f)

根据参数信息进行缩放、旋转、移动和倾斜,a:水平缩放 b:水平倾斜 c:垂直倾斜 d:垂直缩放 e:水平移动 f:垂直移动。

CanvasRenderingContext2D.setTransform(a,b,c,d,e,f)

使用单位矩阵重新设置(覆盖)当前的变换并调用变换,详细参数请参考 transform() 方法。

CanvasRenderingContext2D.resetTransform()

使用单位矩阵重新设置当前变形的方法。

CanvasRenderingContext2D.save()

通过将当前状态放入栈中,保存 canvas 全部状态的方法。

CanvasRenderingContext2D.restore()

通过在绘图状态栈中弹出顶端的状态,将 canvas 恢复到最近的保存状态的方法。

CanvasRenderingContext2D.setLineDash(segments)

在填充线时使用虚线模式,segments 是一个 Array 数组,是一组用来交替绘制线段和间距(坐标空间单位)长度的数字。

CanvasRenderingContext2D.getLineDash()

获取当前线段样式的方法。

下面的方法支持最低平台版本号'1044' (minPlatformVersion>='1044')

CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise)

绘制圆弧路径

CanvasRenderingContext2D.arcTo(x1, y1, x2, y2, radius)

根据控制点和半径绘制圆弧路

CanvasRenderingContext2D.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

绘制椭圆路径

CanvasRenderingContext2D.clip([fillRule])

当前的路径做为裁剪区域,其中fillRule:nonzero(默认值), evenodd

CanvasRenderingContext2D.rect(x, y, width, height)

创建矩形

CanvasRenderingContext2D.clearRect(x, y, width, height)

清空矩形区域

CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1)

创建线性渐变,返回CanvasGradient对象

CanvasRenderingContext2D.createRadialGradient(x0, y0, r0, x1, y1, r1)

创建放射状/环形的渐变,返回CanvasGradient对象

CanvasGradient.addColorStop(offset, color)

添加一个由偏移值和颜色值指定的断点到渐变

CanvasRenderingContext2D.createPattern(image, repetition)

指定的图像创建模式,image需要使用图片元素,repetition:repeat(默认)、repeat-x、repeat-y、no-repeat

© 2020 OPPO. All rights reserved.

results matching ""

    No results matching ""