微信小程序canvas截取任意形状的实现代码

2024-10-30 03:39:51

最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出（直线、弧线、贝塞尔曲线都可以）形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。

比如：

代码

drawPic(x,y,r){
  // const ctxBackground = wx.createCanvasContext('canvasBackground')
  const ctxBackground = wx.createCanvasContext('canvasBackground')
  ctxBackground.save();
  //开始一个新的绘制路径
  ctxBackground.beginPath();
  //设置路径起点坐标
  ctxBackground.moveTo(x, y);
  ctxBackground.arcTo(x, y - r, x + r, y - r, r);
  ctxBackground.lineTo(x + 2 * r, y - r);
  ctxBackground.arcTo(x + 2 * r, y - 2 * r, x + 3 * r, y - 2 * r, r);
  ctxBackground.arcTo(x + 4 * r, y - 2 * r, x + 4 * r, y - r, r);
  ctxBackground.lineTo(x + 5 * r, y - r);
  ctxBackground.arcTo(x + 6 * r, y - r, x + 6 * r, y, r);
  ctxBackground.lineTo(x + 6 * r, y + r);
  ctxBackground.arcTo(x + 7 * r, y + r, x + 7 * r, y + 2 * r, r);
  ctxBackground.arcTo(x + 7 * r, y + 3 * r, x + 6 * r, y + 3 * r, r);
  ctxBackground.lineTo(x + 6 * r, y + 4 * r);
  ctxBackground.arcTo(x + 6 * r, y + 5 * r, x + 5 * r, y + 5 * r, r);
  ctxBackground.lineTo(x + 4 * r, y + 5 * r);
  ctxBackground.arcTo(x + 4 * r, y + 4 * r, x + 3 * r, y + 4 * r, r);
  ctxBackground.arcTo(x + 2 * r, y + 4 * r, x + 2 * r, y + 5 * r, r);
  ctxBackground.lineTo(x + r, y + 5 * r);
  ctxBackground.arcTo(x, y + 5 * r, x, y + 4 * r, r);
  ctxBackground.lineTo(x, y + 3 * r);
  ctxBackground.arcTo(x + r, y + 3 * r, x + r, y + 2 * r, r);
  ctxBackground.arcTo(x + r, y + r, x, y + r, r);
  ctxBackground.lineTo(x, y);
  //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
  ctxBackground.closePath();
  ctxBackground.clip();
  ctxBackground.stroke(); //画线轮廓
  wx.getImageInfo({
   src: 'cloud://normal-env/000060.jpg',
   success: function (res) {
    ctxBackground.drawImage(res.path, 0, 0, 256, 191);
    ctxBackground.restore();
    ctxBackground.draw();
   }
  })
 }

总结

以上所述是小编给大家介绍的微信小程序canvas截取任意形状的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

微信小程序利用canvas 绘制幸运大转盘功能

小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, restaraunts: [], //大转盘奖品信息 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 success:
详解微信小程序canvas圆角矩形的绘制的方法

微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就是使用 canvas 将这块区域绘制出来,最后导出 canvas 即可,但是 canvas 没有直接提供圆角的绘制 api ,所以需要曲线救国圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明
微信小程序小组件基于Canvas实现直播点赞气泡效果

先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: drawImage:function(data){[/align] var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐标值*/ var p12= data[0][2]; /* 三阶贝塞尔曲线第二个控制点坐标值*/ var p13= data[0][3]; /* 三阶贝塞尔曲线终点坐标值*/ var
微信小程序 canvas开发实例及注意事项

微信小程序 wxcanvas 测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的
微信小程序 wxapp画布 canvas详细介绍

微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名类型默认值说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String canvas组件的唯一标识符 binderror EventHandle 当发生错误时触发error事件,detail = { errMsg: 'something w
微信小程序canvas.drawImage完全显示图片问题的解决

问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载目的通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的解决方案准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '',
微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat
微信小程序canvas截取任意形状的实现代码

最近在研究拼图验证码实现,需要对图片的部分模块进行特殊形状切割出一小块,明白后原来是如此简单,第一步就是将所有绘制的形状用线勾出(直线.弧线.贝塞尔曲线都可以)形成闭环,第二步就是切割绘制,第二步不麻烦,麻烦的只是第一步,需要一些计算,所以会在以后,尽力的多保存一些特殊形状的方法. 比如: 代码 drawPic(x,y,r){ // const ctxBackground = wx.createCanvasContext('canvasBackground') const ctxBackgrou
微信小程序 canvas API详解及实例代码

绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基
微信小程序canvas实现环形渐变

本文实例为大家分享了微信小程序canvas实现环形渐变的具体代码,供大家参考,具体内容如下这个例子是在微信小程序中写的效果图后端返回的数据格式,需要的只有otherInfo里面的数据 wxml <view> <canvas class="progress_bg" canvas-id="{{otherInfo.bgid}}"> </canvas> <canvas class="progress_
详解微信小程序-canvas绘制文字实现自动换行

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的. 1 wxml代码 <canvas canvas-id="myCanvas" style="border: 1px solid;"/> 2 w
微信小程序canvas拖拽、截图组件功能

先看下微信小程序canvas拖拽功能组件地址 github.com/jasondu/wx-- readme近期补上实现效果如何实现使用canvas 使用movable-view标签由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题如何将多个元素渲染到canvas上如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层如何实现拖拽元素如何缩放.旋转.删除元素看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.
微信小程序 Canvas增强组件实例详解及源码分享

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("
微信小程序canvas分享海报功能

微信小程序canvas分享海报,包含拒绝授权后重新打开授权设置. 这篇文章完善了第一次拒绝授权后再次点击可以打开授权设置,希望可以帮助到爱学习的道友这里是效果图,图片可以百度上找. 话不多说,直接上代码最重要的一点,千万不要忘记在json文件里面注册组件和wxml里面引用组件 wxml <button class='btn' catchtap='createPoster' >生成海报</button> <my-poster id="getPoster"
微信小程序canvas开发水果老虎机的思路详解

在这个超长假期中,无聊...,所以动手做一个早就计划要做的小玩意, 水果老虎机 ,嗯,这是一个小程序而不是小游戏... 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据.但,问题是动画性能过于孱弱,如图构建一个 7x7 的水果盘,动画性能估计会惨不忍睹,而且纯粹模板结构无论使用 animation 动画方法还是 css 的

微信小程序canvas截取任意形状的实现代码

相关推荐

随机推荐