FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 画布

# createCanvas

createCanvas ft.createCanvas()

创建一个画布对象。

返回值

Canvas

# Canvas

# Canvas.getContext

RenderingContext Canvas.getContext(string contextType)

获取画布对象的绘图上下文。

参数

string contextType

上下文类型

contextType 的合法值

说明 最低版本
2d 2d 绘图上下文

暂不支持

说明 最低版本
webgl webgl 绘图上下文

返回值

RenderingContext

# RenderingContext

画布对象的绘图上下文。

属性

  • string|CanvasGradient fillStyle
    填充颜色。用法同 RenderingContext.setFillStyle()。

  • string|CanvasGradient strokeStyle
    边框颜色。用法同 RenderingContext.setStrokeStyle()。

  • number shadowOffsetX
    阴影相对于形状在水平方向的偏移

  • number shadowOffsetY
    阴影相对于形状在竖直方向的偏移​

  • number shadowColor
    阴影的颜色

  • number shadowBlur
    阴影的模糊级别

  • number lineWidth
    线条的宽度。用法同 RenderingContext.setLineWidth()。

  • string lineCap
    线条的端点样式。用法同 RenderingContext.setLineCap()。

  • string lineJoin
    线条的交点样式。用法同 RenderingContext.setLineJoin()。

lineJoin 的合法值

说明 最低版本
bevel 斜角
round 圆角
miter 尖角
  • number miterLimit
    最大斜接长度。用法同 RenderingContext.setMiterLimit()。

  • number lineDashOffset
    虚线偏移量,初始值为0

  • string font
    当前字体样式的属性。符合 CSS font 语法 的 DOMString 字符串,至少需要提供字体大小和字体族名。默认值为 10px sans-serif。

  • number globalAlpha
    全局画笔透明度。范围 0-1,0 表示完全透明,1 表示完全不透明。

  • string globalCompositeOperation
    在绘制新形状时应用的合成操作的类型。目前Android版本只适用于 fill 填充块的合成,用于 stroke 线段的合成效果都是 source-over。

目前支持的操作有

方法

  • CanvasGradient RenderingContext.createLinearGradient(number x0, number y0, number x1, number y1)
    创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。

  • CanvasGradient RenderingContext.createCircularGradient(number x, number y, number r)
    创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。​

  • RenderingContext.createPattern(string image, string repetition)
    对指定的图像创建模式的方法,可在指定的方向上重复元图像

  • Object RenderingContext.measureText(string text)
    测量文本尺寸信息。目前仅返回文本宽度。同步接口。

  • RenderingContext.save()
    保存绘图上下文。

  • RenderingContext.restore()
    恢复之前保存的绘图上下文。

  • RenderingContext.beginPath()
    开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

  • RenderingContext.moveTo(number x, number y)
    把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条

  • RenderingContext.lineTo(number x, number y)
    增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

  • RenderingContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
    创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

  • RenderingContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
    创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

  • RenderingContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
    创建一条弧线。

  • RenderingContext.rect(number x, number y, number width, number height)
    创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

  • RenderingContext.arcTo(number x1, number y1, number x2, number y2, number radius)
    根据控制点和半径绘制圆弧路径。

  • RenderingContext.clip()
    从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。

  • RenderingContext.fillRect(number x, number y, number width, number height)
    填充一个矩形。用 setFillStyle 设置矩形的填充色,如果没设置默认是黑色。

  • RenderingContext.strokeRect(number x, number y, number width, number height)
    画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色,如果没设置默认是黑色。

  • RenderingContext.clearRect(number x, number y, number width, number height)
    清除画布上在该矩形区域内的内容

  • RenderingContext.fill()
    对当前路径中的内容进行填充。默认的填充色为黑色。

  • RenderingContext.stroke()
    画出当前路径的边框。默认颜色色为黑色。

  • RenderingContext.closePath()
    关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。

  • RenderingContext.scale(number scaleWidth, number scaleHeight)
    在调用后,之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

  • RenderingContext.rotate(number rotate)
    以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。

  • RenderingContext.translate(number x, number y)
    对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

  • RenderingContext.drawImage(string imageResource, number sx, number sy, number sWidth, number sHeight, number dx, number dy, number dWidth, number dHeight)
    绘制图像到画布

  • RenderingContext.strokeText(string text, number x, number y, number maxWidth)
    给定的 (x, y) 位置绘制文本描边的方法

  • RenderingContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
    使用矩阵多次叠加当前变换的方法

  • RenderingContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)
    使用矩阵重新设置(覆盖)当前变换的方法

  • RenderingContext.setFillStyle(string|CanvasGradient color)
    设置填充色。

  • RenderingContext.setStrokeStyle(string|CanvasGradient color)
    设置描边颜色。

  • RenderingContext.setShadow(number offsetX, number offsetY, number blur, string color)
    设定阴影样式。

  • RenderingContext.setGlobalAlpha(number alpha)
    设置全局画笔透明度。

  • RenderingContext.setLineWidth(number lineWidth)
    设置线条的宽度。

  • RenderingContext.setLineJoin(string lineJoin)
    设置线条的交点样式

  • RenderingContext.setLineCap(string lineCap)
    设置线条的端点样式

  • RenderingContext.setLineDash(Array.<number> pattern, number offset)
    设置虚线样式。

  • RenderingContext.setMiterLimit(number miterLimit)
    设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 RenderingContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的,连接处将以 lineJoin 为 bevel 来显示。

  • RenderingContext.fillText(string text, number x, number y, number maxWidth)
    在画布上绘制被填充的文本

  • RenderingContext.setFontSize(number fontSize)
    设置字体的字号

  • RenderingContext.setTextAlign(string align)
    设置文字的对齐

  • RenderingContext.setTextBaseline(string textBaseline)
    设置文字的竖直对齐

# createImage

创建一个图片对象

返回值

Image

图片对象

# Image

图片对象

属性

string src

图片的 URL

number width

图片的真实宽度

number height

图片的真实高度

function onload

图片加载完成后触发的回调函数

function onerror

图片加载发生错误后触发的回调函数

© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

0755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单