微信小程序通过canvas绘制所需图片形状。（文章以直角梯形进行说明）

本文链接：https://blog.youkuaiyun.com/qq_41473887/article/details/80043483

本文介绍了一种使用小程序canvas实现特殊图形效果的方法，并分享了一个遇到的问题及其解决方案：如何避免小圆形图标被背景图形覆盖。

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

通过这种方法可以快捷的完成一些设计的效果。

index.wxml

//新建一个画板。

<canvas canvas-id="myCanvas" style="border: 1px solid;"/>

index.js

  onLoad: function (options) {
    const ctx = wx.createCanvasContext('myCanvas');
    // ctx.setFillStyle('red');

//进行绘制一个直角梯形
    ctx.moveTo(0, 10)
    ctx.lineTo(280, 10)
    ctx.lineTo(280, 130)
    ctx.lineTo(0, 80)
    ctx.lineTo(0, 10)

//在图形中添加所需的图片信息
    const pattern = ctx.createPattern('http://p3kkiwyka.bkt.clouddn.com/6.jpeg', 'repeat-x');
    ctx.fillStyle = pattern;  //将图片信息进行填充

    ctx.fill();

    ctx.stroke()
    ctx.draw()

  },

效果图如下

新手上路求喷~

上文在小程序手机端中发现bug

红圈中的部分可能是canvas的原因是无法实现的,小圆图会被覆盖掉。

解决方法可以使用css的原始覆盖的方式解决具体如下

index.wxml

     <view class='head_img'>
     <image src='/images/1.jpg'></image>
     <view class='triangle'></view>
     </view>

index.wxss

.head_img {
  width: 100%;
  height: 400rpx;
  background: gray;
  z-index: -1;
}
.head_img image{
  width: 100%;
  height: 100%;
}
.triangle {
position:absolute;
bottom:0;
width:0;
height:0;
border-bottom:200rpx solid white;
border-right:758rpx solid transparent;
}