文档介绍：微信小程序
实战开发
第七章 绘图
本章案例流程
Contents
本讲内容
趋势图页面框架实现
用canvas绘制坐标轴
用canvas绘制趋势线
Contents
(1)引用自定义画板
(2)绘制坐标轴
(3)根据模拟数据
绘制趋势图
(4)根据录取线页面数
据绘制趋势图
Contents
项目结构
，
Contents
趋势图页面的实现
趋势图页面框架实现
本页面我们可以通过官方文档中自带的组件结合API的使用，通过画笔绘制想要的二维图像。
本页面需要使用的组件：canvas
本页面需要使用的API：(string canvasId, Object this)
Contents
canvas组件的使用
趋势图页面框架实现
新建一个page，输入名字为qushitu，接下来在qushitu页面下新建对应的js、json、wxml、wxss文件，如下图所示：
Contents
canvas组件的使用
趋势图页面框架实现
，输入canvas组件
Contents
canvas组件的使用
趋势图页面框架实现
为canvas组件添加样式属性
<canvas style="height:100%;width:100%;" canvas-id="firstCanvas"></canvas>
其中canvas-id为你页面中对应画布组件的唯一ID，后面的API的操作，都是通过此Id和组件相关联。
Contents
画布API的使用
趋势图页面框架实现
(1) 为画布创建画笔对象：
//获取画笔
var context = ("firstCanvas")
其中"firstCanvas"为上一节中对应的画布组件的Id
(2) 获取屏幕的宽高：
//获取屏幕宽高
let ktxWindowHeight =
let ktxWindowWidth =