微信小程序例子——使用画布组件绘制一个带阴影及下划线的文字

1、效果展示

2、关键代码

index.wxml

empty

index.js

Page({
  onReady:function(){
    // 页面渲染完成
    var cxt_fillText = wx.createContext();//创建并返回绘图上下文context对象。
    cxt_fillText.beginPath();//开始一个新的路径
    cxt_fillText.setFontSize(60);//设置填充文本字体的大小
    cxt_fillText.setLineWidth(6);//设置线条的宽度
    cxt_fillText.setShadow(0,10,30,'#33ffff');//设置阴影
    cxt_fillText.setStrokeStyle('#33ff66');//设置线条的样式
    cxt_fillText.setFillStyle('#3300ff');//设置填充的样式
    cxt_fillText.fillText("TITF",50,100);//设置填充文本fillText()第一个值为显示的文本，第二个值为文本的x坐标，第三个值为文本的y坐标
    cxt_fillText.moveTo(40,105);//设置线条的起始路径坐标
    cxt_fillText.lineTo(180,105);//设置线条的终点路径坐标
    cxt_fillText.stroke();//对当前路径进行描边
    cxt_fillText.closePath();//关闭当前路径
    wx.drawCanvas({
      canvasId:'canvasFillText',//画布标识，对应的cavas-id
      actions:cxt_fillText.getActions()//导出context绘制的直线并显示到页面
    })
  }
})

3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1gfoLsOF