微信小程序使用canvas绘图，圆形头像，网络背景图，文字，虚线，直线

最新推荐文章于 2024-09-17 22:40:26 发布

肖肖肖丽珠

最新推荐文章于 2024-09-17 22:40:26 发布

阅读量2.6k

点赞数 2

分类专栏：小程序文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33769914/article/details/126010303

版权

本文介绍了如何在微信小程序中利用canvas进行图形绘制，包括创建圆形头像、添加网络背景图以及展示文字和线条。通过canvas的API实现复杂图形和内容的组合，为前端开发提供了更多可能。

摘要由CSDN通过智能技术生成

<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx;position: fixed;z-index: -100; left: -99999rpx"></canvas>

//绘图
getCanvas(index){
  var self=this;
  console.log('绘图')
  const query = wx.createSelectorQuery();
  query.select("#shareCanvas0")
      .fields({
        node: true,
        size: false
      }).exec((res) => {
    const canvas = res[0].node;
    const ctx = canvas.getContext('2d');
    canvas.width = 1144;
    canvas.height = 2392;
    self.setData({
      drawing: true,
    })
    new Promise(function (resolve) {

      // 绘制背景图片
      wx.getImageInfo({
        src: self.data.posterBg, //网络图片
        success(res) {
          const img = canvas.createImage();
          img.src = res.path;
          img.onload = () => {
            ctx.drawImage(img, 0, 0, 1144, 2392);
            resolve(true);
          }
        }