微信小程序使用canvas画不规则图形

最新推荐文章于 2024-01-09 18:14:26 发布

想要飞翔的小猪

最新推荐文章于 2024-01-09 18:14:26 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：绘制图片路径 canvas

本文链接：https://blog.youkuaiyun.com/dwb123456123456/article/details/89333214

微信小程序专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用Canvas API在微信小程序中绘制复杂的图片路径，包括圆形、矩形等，并通过clip方法裁剪图片，实现海报中不同形状的图片展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、根据UI在海报中画不同的图片形状的路径，这中用css很简单，用canvas画的话就要了解canvas中的几个方法，

效果图：

代码如下：

Page({
  canvasIdErrorCallback(e) {
    console.error(e.detail.errMsg)
  },
  onReady(e) {
    // 使用 wx.createContext 获取绘图上下文 context
    const context = wx.createCanvasContext('firstCanvas')
    context.save();
    //开始一个新的绘制路径
    context.beginPath();
    //设置路径起点坐标
    context.moveTo(50, 50);
    context.arc(50, 50, 50, 0, Math.PI, true); //画圆
    context.moveTo(0, 50);
    context.lineTo(0, 100);  //控制绘制图片路径的高度
    context.lineTo(100, 100); //控制绘制图片路径的高度
    context.lineTo(100, 50);
    //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
    context.closePath();
    context.clip();
    context.stroke(); //画线轮廓
    context.drawImage('../../images/1.png', 0, 0, 256, 191);
    context.restore();
    context.draw();
  }
})

这个绘制图片路径相对简单，只要了解canvas基本方法，再调试就能实现