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

版权声明：如需转发，与我联系 https://blog.csdn.net/qq_41473887/article/details/80043483

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

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: 400 rpx ;

background: gray ;

z-index: -1 ;

}

.head_img image {

width: 100% ;

height: 100% ;

}

.triangle {

position: absolute ;

bottom: 0 ;

width: 0 ;

height: 0 ;

border-bottom: 200 rpx solid white ;

border-right: 758 rpx solid transparent ;

}