字节小程序 canvas 使用及踩坑

先说说坑吧,使用方法都在后面

踩了个不大不小的坑,想实现的效果是保存canvas画的图片下的 canvas字体加粗,依照社区的方法是使用ctx.font = 'normal bold 20px Arial, sans-serif';但尼玛就离谱,微信上我在demo上使用无碍,保存图片效果实现,字节死活无法实现,结果。。。把normal去了就行了。。。字节的字号前面 只能写 italic 、 small-caps 、bold这三种,好吧,浪费了很久时间

接下来看看怎么实现字节小程序的canvas使用

首先是官方例子官方方法

ttml:

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>

js:

const app = getApp()

Page({

  data: {

  },

  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg)

  },

  onLoad: function (e) {

    // 使用 wx.createContext 获取绘图上下文 context

    var context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00")

    context.setLineWidth(5)

    context.rect(0, 0, 200, 200)

    context.stroke()

    context.setStrokeStyle("#ff0000")

    context.setLineWidth(2)

    context.moveTo(160, 100)

    context.arc(100, 100, 60, 0, 2 * Math.PI, true)

    context.moveTo(140, 100)

    context.arc(100, 100, 40, 0, Math.PI, false)

    context.moveTo(85, 80)

    context.arc(80, 80, 5, 0, 2 * Math.PI, true)

    context.moveTo(125, 80)

    context.arc(120, 80, 5, 0, 2 * Math.PI, true)

    context.stroke()

    context.draw()

  },

})

接下来在上面绘制文本


context.setFontSize(20)

context.setFillStyle('skyblue')

// context.font = 'normal bold 20px Arial, sans-serif' // 加粗效果不生效,字号前面只能写 italic 、 small-caps 、bold

context.font = 'bold 20px Arial, sans-serif' // 字体加粗

context.fillText('测试文本', 10, 190)

注意:所有样式效果都要在fillText之前书写,如果需要字体加粗,需要调整绘制顺序,先把细字体文案绘制完成,再统一绘制加粗字体

例子如下:

context.fillText('测试文本1', 10, 190)

context.fillText('测试文本2', 10, 210)

context.fillText('测试文本3', 10, 230)

context.font = 'bold 20px Arial, sans-serif' 

context.fillText('测试文本4', 10, 250)

这样1,2,3都是细的,只有4为粗字体

还有文字自动换行等效果,详情可以参考canvas点击生成图片及文字自动换行,里面有一个GitHub的demo很好用

注意:字节小程序目前仍不支持将canvas 2d画布中的内容导出为图片

抽空再把使用canvas保存整个页面为图片保存到本地的demo实现了,上面的大佬其实已经很写的详细了,就酱


更新一个我自己的例子

//先在onLoad中定义

onLoad: function (query) {

    var that = this

    //获取用户设备信息,屏幕宽度

    tt.getSystemInfo({

      success: res => {

        console.log(res, 'getSystemInfo')

        that.setData({

          screenWidth: res.screenWidth,

          screenHeight: res.screenHeight,

          pixelRatio: res.pixelRatio,

        })

        console.log(that.data.pixelRatio, that.data.screenWidth, that.data.screenHeight)

      }

    })

    tt.getImageInfo({

      src: 'https://fcdn.qiushilaile.com/adx/app-101610706237575.png',

      success: function (res) {

        that.setData({

          shareImgSrc: res.path,

          shareWidth: res.width,

          shareHeight: res.height,

        });

        // console.log("111", that.data.shareImgSrc, that.data.shareWidth, that.data.shareHeight)

      }

    })

    tt.getImageInfo({

      src: 'https://fcdn.qiushilaile.com/adx/app-68841610539842230.png',

      success: function (res) {

        that.setData({

          shareImgSrc1: res.path,

          shareWidth1: res.width,

          shareHeight1: res.height,

        });

        // console.log("111", that.data.shareImgSrc1, that.data.shareWidth1, that.data.shareHeight1)

      }

    })

    tt.getImageInfo({

      src: 'https://fcdn.qiushilaile.com/adx/app-49601610539855858.png',

      success: function (res) {

        that.setData({

          shareImgSrc2: res.path,

          shareWidth2: res.width,

          shareHeight2: res.height,

        });

      }

    })

    this.setData({

      showScore: query.showScore

    })

    console.log(this.data.showScore)

    tuiwa.globalData.currentPage = this

  },

  //再获取临时路径

  getTempFilePath: function () {

    let that = this

    console.log('111')

    tt.canvasToTempFilePath({

      canvasId: 'share',

      destWidth: that.data.screenWidth * that.data.pixelRatio,

      destHeight: that.data.screenHeight * that.data.pixelRatio,

      success: (res) => {

        console.log(res)

        that.setData({

          shareTempFilePath: res.tempFilePath

        })

        tt.saveImageToPhotosAlbum({

          filePath: that.data.shareTempFilePath,

          success: (res) => {

            console.log(res)

            tt.showToast({ title: "成功保存到本地相册" });

          },

          fail: (err) => {

            console.log(err)

          }

        })

      },

      fail: (err) => {

        console.log(err)

      }

    })

  },

//点击事件调用函数save生成canvas

save: function () {

      //绘制

      let that = this;

      let shareWidth = this.data.shareWidth

      let shareWidth1 = this.data.shareWidth1

      let shareWidth2 = this.data.shareWidth2

      let shareHeight = this.data.shareHeight

      let shareHeight1 = this.data.shareHeight1

      let shareHeight2 = this.data.shareHeight2

      let shareImgSrc = this.data.shareImgSrc

      let shareImgSrc1 = this.data.shareImgSrc1

      let shareImgSrc2 = this.data.shareImgSrc2

      let showScore = this.data.showScore

      let context = tt.createCanvasContext('share')

      // 图片

      context.drawImage(shareImgSrc, 0, 0, shareWidth, shareHeight)

      context.drawImage(shareImgSrc1, 40, 200, shareWidth1 / 2.7, shareHeight1 / 2.7)

      context.drawImage(shareImgSrc2, 40, 320, shareWidth2 / 2.7, shareHeight2 / 2.7)

      // 数字

      context.setFontSize(60)

      context.setTextAlign('center')

      context.setFillStyle('#FFEC5D')

      context.setShadow(5, 5, 10, 'red')

      context.fillText(showScore, 240, 260, 115)

      // 文字

      context.setFontSize(20)

      context.font = 'bold 20px Arial, sans-serif'

      context.fillText('新年发大财', 220, 460, 115)

      context.fillText('好运不间断', 220, 480, 115)

      context.fillText('升职再加薪', 220, 500, 115)

      context.fillText('2021牛气冲天', 220, 520, 115)

      // 生成

      context.draw(true, this.getTempFilePath)

  },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容