只有canvas的api，要搞一个成熟的K线图组件出来，对我来说是一个巨大的挑战，但是没办法，小程序中，由于api的细微差别，成熟的三方框架用不了，只好硬着头皮自己来。从熟读api开始，一步一步尝试，希望能有所成就。- -！压力巨大，开撸吧！！

先创建一个canvas元素，以后所有的例子都要用到他，设置好id，绑定好事件，不出意外，canvas元素应该不会改动了

// canvas.wxml <canvas canvas-id="stage" class="stage" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" bindtouchcancel="touchcancel" bindlongtap="longtap" > </canvas>// canvas.wxss .stage { width: 100%; height: 200px; margin: 20px auto; background-color: #fff; }

通过官方文档api的学习，发现一个图形，从绘制开始，到结束都有一定的规律，比如画一个矩形

// 第一步：声明一个canvas对象 const ctx = wx.createCanvasContext('stage') // 第二步：定义要绘制的内容 ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) // 第三步：根据第二步中绘制的内容，将图像画出来 ctx.draw()

这样，就搞定了矩形

第一个矩形

填充样式很多，比如说线性渐变，圆角渐变等，这些都不是重点，需要的时候找api即可，重点在于如果想要绘制图片的同时，还想画一条线，并且写入几个文字应该怎么玩？

根据刚才发现的规律，在第二步中分别定义就行，试试看

const ctx = wx.createCanvasContext('stage') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.beginPath() ctx.moveTo(10, 100) ctx.lineTo(150, 100) ctx.setStrokeStyle('red') ctx.stroke() ctx.setFontSize(20) ctx.setFillStyle('orange') ctx.fillText('canvas 真尼玛难！', 10, 150) ctx.draw()

发现凡是填充内容，都是用的跟fill有关的api，凡是填充线条，都是跟stroke有关的api，每一个图形的绘制，都以一次填充结束，上面我们画的图形如下

同时绘制矩形线条和文字

思考坐标

.
canvas 画布的坐标跟我们数学上常用的坐标不太一样，它的(0, 0)点在画布的左上角，可是实际使用时，我们要将坐标原点放在左下角，或者我们生成的坐标系的原点处。因此，在传入数据时，我们要讲数据进行处理才能符合我们的实际使用。

我的canvas高度为200，因此左下角的坐标点为(0, 200)，这时我们根据常识希望画一个从(0, 0)到(200, 100)的直线，那么我们应该这样做

line([0, 0], [200, 100]) function line (coors, coore) { const ctx = wx.createCanvasContext('stage') ctx.beginPath() ctx.setStrokeStyle('red') ctx.moveTo(coors[0], 200 - coors[1]) ctx.lineTo(coore[0], 200 - coore[1]) ctx.stroke() ctx.draw() }

坐标转换

如果我们想要画一个折线图，从上面的例子可以看出，无非就是根据传入的数据，多做几次ctx.lineTo操作即可，根据这个思路可以封装一个折线图方法

line (canvasId, options) { let windowWidth = 0 wx.getSystemInfo({ success (result) { windowWidth = result.windowWidth } }) = [] options.xAxis.map((item, i) => { data.push([i * a, 200 - options.yAxis[i]]) }) ..map((item, i) => { if (i == 0) { ctx.moveTo(item[0], item[1]) } ctx.lineTo(item[0], item[1]) }) ....draw() }

在onLoad中调用

onLoad (e) { this.line('stage', { xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77, 122, 133, 89, 156, 122,128, 143, 111, 101, 132, 99, 98, 44, 12, 14, 111, 13, 12, 55] }) },

赞赏

邀请