codecamp

支付宝小程序API 画布·canvas

my.createCanvasContext

简介

my.createCanvasContext 是创建 canvas 绘图上下文的 API。该绘图上下文只作用于对应 canvasId 的 canvasId 的<canvas/>

扫码体验

画布.jpeg

入参

参数 类型 说明
canvasId String 定义在 <canvas/> 上的 ID。

返回值

返回值为 CanvasContext。

CanvasContext 概览

名称 描述
CanvasContext.addColorStop 创建一个圆形的渐变色。
CanvasContext.arc 画一条弧线。
CanvasContext.beginPath 开始创建一个路径，需要调用 fill 或者 stroke 才会使用路径进行填充或描边。
CanvasContext.bezierCurveTo 创建三次方贝塞尔曲线路径。
CanvasContext.clearRect 清除画布上在该矩形区域内的内容。
CanvasContext.clip 将当前创建的路径设置为当前剪切路径。
CanvasContext.closePath 关闭一个路径。
CanvasContext.createCircularGradient 创建一个圆形的渐变色。起点在圆心，终点在圆环。
CanvasContext.createLinearGradient 创建一个线性的渐变色。
CanvasContext.draw 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
CanvasContext.drawImage 绘制图像，图像保持原始尺寸。
CanvasContext.fill 对当前路径中的内容进行填充。
CanvasContext.fillRect 填充矩形。
CanvasContext.fillText 在画布上绘制被填充的文本。
CanvasContext.getImageData 获取 canvas 区域隐含的像素数据。
CanvasContext.lineTo 增加一个新点，然后创建一条从上次指定点到目标点的线。
CanvasContext.measureText 测量文本尺寸信息，目前仅返回文本宽度。同步接口。
CanvasContext.moveTo 把路径移动到画布中的指定点，不创建线条。
CanvasContext.putImageData 将像素数据绘制到画布。
CanvasContext.quadraticCurveTo 创建二次贝塞尔曲线路径。
CanvasContext.rect 创建二次贝塞尔曲线路径。
CanvasContext.restore 恢复之前保存的绘图上下文。
CanvasContext.rotate 以原点为中心，原点可以用 translate 方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
CanvasContext.save 保存当前的绘图上下文。
CanvasContext.scale 在调用scale方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。
CanvasContext.setFillStyle 设置填充色。
CanvasContext.setFontSize 设置字体大小。
CanvasContext.setGlobalAlpha 设置全局画笔透明度。
CanvasContext.setLineCap 设置线条的端点样式。
CanvasContext.setLineDash 设置虚线的样式。
CanvasContext.setLineJoin 设置线条的交点样式。
CanvasContext.setLineWidth 设置线条的宽度。
CanvasContext.setMiterLimit 设置最大斜接长度。
CanvasContext.setShadow 设置阴影样式。
CanvasContext.setStrokeStyle 设置边框颜色。
CanvasContext.setTextAlign Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。
CanvasContext.setTextBaseline Canvas 2D API 描述绘制文本时，当前文本基线的属性。
CanvasContext.setTransform 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。
CanvasContext.stroke 画出当前路径的边框。默认 black。
CanvasContext.strokeRect 画一个矩形（非填充）。
CanvasContext.toDataURL 获取画布指定区域的 data URL数据。
CanvasContext.toTempFilePath 把当前画布的内容导出生成图片，并返回文件路径。
CanvasContext.transform 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文。
CanvasContext.translate 对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。
支付宝小程序API 动画·Animation
支付宝小程序API 地图
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序介绍

支付宝小程序 开放能力

支付宝小程序开发文档

支付宝小程序 开发入门

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 UI

支付宝小程序 云与开放能力

支付宝小程序 行业

支付宝小程序 服务端快速示例

支付宝小程序 框架

支付宝小程序框架 小程序全局配置

支付宝小程序 小程序页面

支付宝小程序框架 AXML

支付宝小程序框架 SJS语法

支付宝小程序框架 事件系统

支付宝小程序框架 自定义组件

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 视图容器

支付宝小程序组件 基础内容

支付宝小程序 表单组件

支付宝小程序组件 导航

支付宝小程序组件 媒体

支付宝小程序 画布

支付宝小程序 地图

支付宝小程序 开放组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序扩展组件 布局导航

支付宝小程序浮层组件 操作浮层

支付宝小程序扩展组件 结果类

支付宝小程序扩展组件 提示引导

支付宝小程序扩展组件 表单类

支付宝小程序组件 手势类

支付宝小程序手势组件 其他

支付宝小程序 营销组件

支付宝小程序 API

支付宝小程序API 界面

支付宝小程序 多媒体

支付宝小程序API 设备

支付宝小程序 开发工具

支付宝小程序 界面

支付宝小程序 小程序调试

支付宝小程序 功能面板

支付宝小程序 实验室

支付宝小程序 IDE扩展

支付宝小程序 多端发布

支付宝小程序 插件

支付宝小程序 插件类型

支付宝小程序 插件获取与使用

支付宝小程序 插件开发与发布

支付宝小程序 插件相关API

支付宝小程序 云服务

支付宝小程序 Serverless

支付宝小程序 快速开始

支付宝小程序Serverless 云调用指南

营销能力API

会员能力API

支付能力 API

安全能力 API

资金能力 API

支付宝小程序Serverless 通用接口API

支付宝小程序Serverless 阿里云能力API

支付宝小程序 小程序云应用

支付宝小程序 扩展能力

支付宝小程序扩展能力 开发框架

支付宝小程序扩展能力 工具类库

支付宝小程序 常见问题

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }