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

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

index.wxml

//新建一个画板。

 

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

 

 

index.js

 

 1 onLoad: function (options) {
 2 const ctx = wx.createCanvasContext('myCanvas');
 3 // ctx.setFillStyle('red');
 4  
 5 //进行绘制一个直角梯形
 6 ctx.moveTo(0, 10)
 7 ctx.lineTo(280, 10)
 8 ctx.lineTo(280, 130)
 9 ctx.lineTo(0, 80)
10 ctx.lineTo(0, 10)
11  
12 //在图形中添加所需的图片信息
13 const pattern = ctx.createPattern('http://p3kkiwyka.bkt.clouddn.com/6.jpeg', 'repeat-x');
14 ctx.fillStyle = pattern; //将图片信息进行填充
15  
16 ctx.fill();
17  
18 ctx.stroke()
19 ctx.draw()
20  
21 },
22

 

 

效果图如下

新手上路  求喷~

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

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

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

index.wxml

 

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

 

index.wxss

 

 1 .head_img {
 2 width: 100%;
 3 height: 400rpx;
 4 background: gray;
 5 z-index: -1;
 6 }
 7 .head_img image{
 8 width: 100%;
 9 height: 100%;
10 }
11 .triangle {
12 position:absolute;
13 bottom:0;
14 width:0;
15 height:0;
16 border-bottom:200rpx solid white;
17 border-right:758rpx solid transparent;
18 }

 

posted @ 2018-04-22 21:50  邱小健  阅读(454)  评论(0)  编辑  收藏  举报