在一个网站上面提供了很多效果,例如,flash、幻灯片等,在微信小程序里面腾讯也提供了大量比较酷的特效,例如,动画、绘图等,您可以使用腾讯提供的相应的接口以及接口里面的方法开发出非常炫酷的小程序来。现在我们看到的小程序基本上都是普普通通的小程序,大多数没有什么特色,一是由小程序内容的需要,二是微信小程序不过才刚刚上线不到几个月,所以,很多实力开发者还在学习小程序编程,相信过不了多久就会编写出大量很酷的小程序来。

  使用腾讯提供的绘图接口您可以绘制出各种各样的图画来,下面将通过一个实例来演示如何制作一个绘图。

  视图层用WXML是:
<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

绘图的步骤:

  第一步:创建一个 Canvas 绘图上下文

  const ctx = wx.createCanvasContext('myCanvas')


  创建一个canvas绘图上下文的意思类似php程序里面实例化一个类,实例化一个类后就得到一个对象,使用对象就可以调用对象里面的方法(也就是类中的函数)。

  在接口里面的参数“myCanvas”对应着.wxml视图层里面的canvas-id的值,表示要在这个id对应的画布上面绘图,这是非常重要的,因为,如果不指定绘画的id就无法识别出在哪个画布上绘图了。

  同样,通过上面的语句创建一个类似php里面的对象ctx,在对象ctx中有腾讯提供了以下几大类对象方法分别是:颜色,样式,阴影、渐变、线条样式、矩形、路径、变形、文字、图片、混合和其它方法,共十大类组合起来可以绘制出丰富的图画来。

  除了使用上面的这种方法创建一个Canvas绘图上下文外,小程序框架还提供了另外一个接口wx.createContext来创建绘图上下文,但是,这种是腾讯不推荐使用的,关于这种方法我们将在后面单作一个示例给大家。

  第二步:使用 Canvas 绘图上下文进行绘图描述

  通过第一步创建了一个绘图上下文,也就是生成了一个对象ctx后,就可以使用这个对象里面的对象方法(也就是上面提到的10大类方法)来进行绘图描述。

  为什么这里叫绘图描述而不是叫绘图,其实,这一步是对绘制什么样的图片进行代码编写,编写好并不会马上执行,就像我们写好的php程序一样,如果放在那里它不会自动去执行一个道理,真正执行的代码的是第三步画图。

  设置绘图上下文的填充色为红色:

  ctx.setFillStyle('red')


  画一个矩形,填充为刚刚设置的红色:

  ctx.fillRect(10, 10, 150, 75)


  第三步:画图

  上面只是创建了一个绘图上下文和画了一个矩形并填充了红色,这一步就是真正要在<canvas/>给组件上面画图。

  ctx.draw()


  通过上面这个方法,就可以把红色矩形画到<canvas />组件上面。

结果:

fill-red

使用wx.createContext()接口绘图

  上面已经提供到了除了使用wx.createCanvasContext来创建一个canvas上下文外,还可以使用腾讯官方“不推荐使用”的wx.createContext()来创建一个上下文。

  方法跟上面类似:

  1)  创建一个canvas上下文:
this.context = wx.createContext()

  请注意在这里并没有像上面写上画布的id“myconvas”,这样画图的时候会不会找不到在哪个画布上画图呢?请看下面就知道答案了。

  2)使用this.context对象方法进行绘图描述,这一步就是调用那10类方法中的各种方法进行绘图,这里省略。

  3)画图:

  调用画图接口wx.drawCanvas进行画图。

        wx.drawCanvas({
          canvasId: 'canvas',
          actions: actions
        })


  也就是在画图时才调用canvas画布对于应的id“canvas”。

  从上面可以知道:这两类绘画都必须使用画布中的id,只是这个id会在不同的步骤中使用;再一个就是第一种方法的绘图使用的是创建的上下文中的对象里面的方法,后一种是通过一种接口wx.createContext创建绘图上下文,使用另一接口wx.drawCanvas来画图。

  上面是一个绘图的简单示例,从中可以看出绘图只需要三步:创建绘图上下文;使用对象方法进行绘图描述;最后一步画图。