微信小程序教程
7.9.5 Canvas API
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

概述

网络

媒体

操作文件

本地存储

位置

设备

界面

Canvas绘图

渐变

颜色

Canvas坐标系

概述

Canvas API

创建context 对象

方法 说明
createCanvasContext 创建 canvas 绘图上下文(指定 canvasId)
createContext(不推荐使用) 创建 canvas 绘图上下文
drawCanvas(不推荐使用) 进行绘图
canvasToTempFilePath 导出图片

context 对象的方法列表

1. 颜色,样式,阴影

方法 说明
setFillStyle 设置填充样式
setStrokeStyle 设置线条样式
setShadow 设置阴影

2. 渐变

方法 说明
createLinearGradient 创建一个线性渐变
createCircularGradient 创建一个圆形渐变
addColorStop 在渐变中的某一点添加一个颜色变化

3. 线条样式

方法 说明
setLineWidth 设置线条宽度
setLineCap 设置线条端点的样式
setLineJoin 设置两线相交处的样式
setMiterLimit 设置最大倾斜

4. 矩形

方法 说明
rect 创建一个矩形
fillRect 填充一个矩形
strokeRect 画一个矩形(不填充)
clearRect 在给定的矩形区域内,清除画布上的像素

5. 路径

方法 说明
fill 对当前路径进行填充
stroke 对当前路径进行描边
beginPath 开始一个路径
closePath 关闭一个路径
moveTo 把路径移动到画布中的指定点,但不创建线条。
lineTo 添加一个新点,然后在画布中创建从该点到最后指定点的线条。
arc 添加一个弧形路径到当前路径,顺时针绘制。
quadraticCurveTo 创建二次方贝塞尔曲线
bezierCurveTo 创建三次方贝塞尔曲线

6. 变形

方法 说明
scale 对横纵坐标进行缩放
rotate 对坐标轴进行顺时针旋转
translate 对坐标原点进行缩放

7. 文字

方法 说明
fillText 在画布上绘制被填充的文本
setFontSize 设置字体大小
setTextBaseline 设置字体基准线
setTextAlign 设置字体对齐方式

8. 图片

方法 说明
drawImage 在画布上绘制图像

9. 混合

方法 说明
setGlobalAlpha 设置全局画笔透明度

10. 其他

方法 说明
save 保存当前绘图上下文
restore 恢复之前保过的绘图上下文
draw 进行绘图
getActions(不推荐使用) 获取当前context上存储的绘图动作
clearActions(不推荐使用) 清空当前的存储绘图动作

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验