阅读 28

小程序 CanvasContext

原文:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html

CanvasContext

canvas 组件的绘图上下文。CanvasContext 是旧版的接口, 新版 Canvas 2D 接口与 Web 一致。

属性

string| fillStyle

基础库 1.9.90 开始支持,低版本需做。

填充颜色。用法同 。

string| strokeStyle

基础库 1.9.90 开始支持,低版本需做。

边框颜色。用法同 。

number shadowOffsetX

基础库 1.9.90 开始支持,低版本需做。

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

number shadowOffsetY

基础库 1.9.90 开始支持,低版本需做。

阴影相对于形状在竖直方向的偏移

number shadowColor

基础库 1.9.90 开始支持,低版本需做。

阴影的颜色

number shadowBlur

基础库 1.9.90 开始支持,低版本需做。

阴影的模糊级别

number lineWidth

基础库 1.9.90 开始支持,低版本需做。

线条的宽度。用法同 。

string lineCap

基础库 1.9.90 开始支持,低版本需做。

线条的端点样式。用法同 。

string lineJoin

基础库 1.9.90 开始支持,低版本需做。

线条的交点样式。用法同 。

lineJoin 的合法值

说明最低版本
bevel 斜角  
round 圆角  
miter 尖角  

number miterLimit

基础库 1.9.90 开始支持,低版本需做。

最大斜接长度。用法同 。

number lineDashOffset

基础库 1.9.90 开始支持,低版本需做。

虚线偏移量,初始值为0

string font

基础库 1.9.90 开始支持,低版本需做。

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

number globalAlpha

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

string globalCompositeOperation

基础库 1.9.90 开始支持,低版本需做。

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

目前支持的操作有

  • 安卓:xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light
  • iOS:xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity

方法

将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用  来指定渐变点,至少要两个。

创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的CanvasGradient对象需要使用  来指定渐变点,至少要两个。

对指定的图像创建模式的方法,可在指定的方向上重复元图像

测量文本尺寸信息。目前仅返回文本宽度。同步接口。

保存绘图上下文。

恢复之前保存的绘图上下文。

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

  • 在最开始的时候相当于调用了一次 beginPath
  • 同一个路径内的多次 setFillStylesetStrokeStylesetLineWidth等设置,以最后一次设置为准。

把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条

增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。

创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0,终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

创建一个矩形路径。需要用  或者  方法将矩形真正的画到 canvas 中

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

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

填充一个矩形。用  设置矩形的填充色,如果没设置默认是黑色。

画一个矩形(非填充)。 用  设置矩形线条的颜色,如果没设置默认是黑色。

清除画布上在该矩形区域内的内容

对当前路径中的内容进行填充。默认的填充色为黑色。

画出当前路径的边框。默认颜色色为黑色。

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

在调用后,之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

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

对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

绘制图像到画布

给定的 (x, y) 位置绘制文本描边的方法

使用矩阵多次叠加当前变换的方法

使用矩阵重新设置(覆盖)当前变换的方法

设置填充色。

设置描边颜色。

设定阴影样式。

设置全局画笔透明度。

设置线条的宽度

设置线条的交点样式

设置线条的端点样式

设置虚线样式。

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

在画布上绘制被填充的文本

设置字体的字号

设置文字的对齐

设置文字的竖直对齐

原文:https://www.cnblogs.com/pxuan/p/12894780.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐