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

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

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;

}