小程序 uni canvas绘制圆角图片圆角矩形

获取canvas的宽度保证适应屏幕

             uni.getSystemInfo({success: (res)=> { // res - 各种参数let info = uni.createSelectorQuery().select(".myCanvas");info.boundingClientRect((data)=> { //data - 各种参数this.canvas=datathis.pross( data)}).exec()}});

圆角图片

//头像ctx.save(); // 先保存状态 已便于画完圆再用ctx.beginPath(); //开始绘制//先画个圆ctx.arc(data.width-50,  50, 25, 0, Math.PI * 2);ctx.setFillStyle('#ffffff')ctx.fill()//保证图片无bug填充ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内ctx.drawImage(imgUrl, data.width-70,30,50,50) // 推进去图片ctx.restore();ctx.draw();

圆角矩形

             const ctx = uni.createCanvasContext('myCanvas')//绘制背景色let x=0,y=0,w=data.width,h=data.height,r=10ctx.beginPath()// 因为边缘描边存在锯齿，最好指定使用 transparent 填充ctx.setFillStyle('transparent')// ctx.setStrokeStyle('transparent')// 左上角ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)// border-topctx.moveTo(x + r, y)ctx.lineTo(x + w - r, y)ctx.lineTo(x + w, y + r)// 右上角ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)// border-rightctx.lineTo(x + w, y + h - r)ctx.lineTo(x + w - r, y + h)// 右下角ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)// border-bottomctx.lineTo(x + r, y + h)ctx.lineTo(x, y + h - r)// 左下角ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)// border-leftctx.lineTo(x, y + r)ctx.lineTo(x + r, y)// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应ctx.fill()// ctx.stroke()ctx.closePath()// 剪切ctx.clip()ctx.setFillStyle('#ffffff')ctx.fillRect(0,0, data.width, data.height)

小程序 uni canvas绘制圆角图片圆角矩形相关推荐

微信小程序保存canvas绘制的图片到本地，拒绝图片授权后继续授权
authorizeSaveImg() { //重新授权相册const that = this;wx.getSetting({success(res) {// 第一,直接调取保存,系统会自动调取授权if ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
微信小程序新版canvas绘制图片方法
截至2022.12.23 修改日微信小程序开发文档介绍不全,导致很多用户绘制图片不显示或失败,因此写下截至目前的可行方案 <canvas type="2d" id=&quo ...
微信小程序通过canvas绘制所需图片形状。（文章以直角梯形进行说明）
通过这种方法可以快捷的完成一些设计的效果. index.wxml //新建一个画板. 1 <canvas canvas-id="myCanvas" style="b ...

小程序 uni canvas绘制圆角图片圆角矩形

小程序 uni canvas绘制圆角图片圆角矩形

小程序 uni canvas绘制圆角图片圆角矩形相关推荐

最新文章

热门文章

小程序 uni canvas绘制圆角图片 圆角矩形

小程序 uni canvas绘制圆角图片 圆角矩形

小程序 uni canvas绘制圆角图片 圆角矩形相关推荐

最新文章

热门文章

小程序 uni canvas绘制圆角图片圆角矩形

小程序 uni canvas绘制圆角图片圆角矩形

小程序 uni canvas绘制圆角图片圆角矩形相关推荐