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

置顶

VIP文章 FutrueJet

于 2016-10-26 22:04:34 发布

阅读量1w

点赞数

分类专栏：微信小程序开发例子微信小程序开发例子【canvas组件】文章标签： Web前端互联网前端开发编程语言微信小程序

本文链接：https://blog.csdn.net/FutrueJet/article/details/52938822

版权

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();//对当前