通过这种方法可以快捷的完成一些设计的效果。
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 }
请发表评论