小程序利用canvas画图并分享

最新推荐文章于 2024-04-01 17:33:16 发布
置顶 最新推荐文章于 2024-04-01 17:33:16 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： 小程序 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingquantingxue/article/details/109453646
版权

这篇文章主要为大家详细介绍了微信小程序用canvas画图，并实现分享功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近开始做微信小程序，有这样一个需求：

访客邀请页面，分享出来的图片是带有当前邀请的访客信息的图片,具体如下图:
在这里插入图片描述
分享之后的图片:
在这里插入图片描述
HTML部分:(在页面中隐藏画好的图片)
在这里插入图片描述
JS部分:
1.全局定义canvans变量
在这里插入图片描述
2.设置canvans的尺寸
在这里插入图片描述
在onload函数中设置canvans的宽高;也可以在canvans标签中设置样式


3.初始化canvans绘制图片(在onReady函数中调用)
在这里插入图片描述
在这里插入图片描述
4.画图片上的文字部分
在这里插入图片描述
5.导出画好的canvans图片
在这里插入图片描述
6.设置分享之后的图片,标题,链接
在这里插入图片描述

铭泉听雪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序用canvas画图并分享
11-21
最近开始做微信小程序，有这样一个需求： 从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片 如下图的列表： 分享出来的样子： 解决方案和思路：canvas画图生成图片 上代码： 【html部分】 <canvas xss=removed canvas-id='myCanvas'></canvas> <button open-type='share'>分享</button> 【js部分】 var ctx = "" // 用于获取canvas var leftMargin
微信小程序canvas组件简单运用之涂鸦
热门推荐
sinat_36947685的博客
12-19 1万+
源码 index.html                                       disable-scroll="false"             bindtouchstart="touchStart"             bindtouchmove="touchMove"             bindtouc
小程序使用wxml2-canvans制作图片并下载
hql1024的博客
05-20 2144
一、js插件下载 https://pan.baidu.com/s/1jgAUpAmtTolAaDYU030WSg 提取码: tg9f 复制这段内容后打开百度网盘手机App，操作更方便哦 下载源文件后放到代码包里面 上代码，样式可自己编辑 <view id="PosterPage"> <view class="share__canvas share__canvas1"> <image class="share__canvas1-image draw_canvas" d.
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84048554的博客
04-01 839
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
小程序 canvas 分享到朋友圈
Wind的博客
08-10 485
1. 获取用户设备信息，屏幕宽度 wx.getSystemInfo({ success: res =&gt; { console.log(res); that.setData({ screenWidth: res.screenWidth, screenHeight: res.screenHeight, }); } }); 2. 实现过程中要注意的点： 1、如果是请求网络图片的...
微信小程序之canvas画图
weixin_33897722的博客
05-16 938
开题 前几天接到个需求，长按图片保存到相册，该图片上有用户头像和昵称以及对应的二维码；那这就不能直接当作图片来操作了，要先把整体图片画出来；我当时用的是canvas。效果图如下： canvas drawImage 用canvas画图主要使用dramImage API，不太清楚的同学可以区MDN看看：developer.mozilla.org/zh-CN/docs/… 主要是用到图片URL，相对于...
微信小程序使用canvas绘图
Cousin__的博客
06-23 1879
微信小程序的绘图是使用canvas，canvas的使用和普通的h5的canvas使用一样，没有什么区别 想使用canvas，首先是要在页面是创建canvas标签，如果只是想要获得图片，可以把canvas定位到页面之外 <canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas> <button bindtap='click'>canvas绘图</button> 然
大转盘抽奖小程序版 转盘抽奖网页版
12-09
把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本，这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见大转盘...
Google Android SDK开发范例大全(PDF高清完整版3)（4-3）
01-30
10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode...
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
01-30
10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode...
微信小程序canvas画图功能实现
12-26
微信小程序canvas画图功能实现
简单画图小程序完结
07-04
一个简单的画图小程序，现在终于初步完结了，真开心啊，不过还是发觉自己学得知识真是不够用啊，还得好好学习啊
微信小程序canvas原生定制名片
05-07
微信小程序canvas原生定制名片
微信小程序使用canvas绘图并且把图片上传到服务器上面.rar
05-25
微信小程序使用canvas绘图并且把图片上传到服务器上面
Google Android SDK开发范例大全(PDF完整版4)（4-4）
01-30
10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode...
小程序下载PDF文件预览并转发
mingquantingxue的博客
10-20 1821
小程序下载PDF文件预览并转发 1.调用wx.downloadFile下载文件，success回调函数内部 2.再调用wx.openDocument打开并预览下载文档。 3.注：如需持久保存，需主动调用 wx.saveFile，才能在小程序下次启动时访问得到 js部分 注:1.wx.openDocument预览文档时,需要手动设置showMenu才能显示右上角的菜单进行转发 2.wx.downloadFile下载文档时,设置文件的filePath值 ...
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1591
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
小程序 canvas 画图
05-13
小程序的 Canvas 组件提供了一种在页面中进行绘图的方式。你可以使用 Canvas 组件绘制各种形状、绘制文字、图片等。下面是一个简单的 Canvas 画图示例。 1. 在 WXML 文件中添加 Canvas 组件： ```html <canvas canvas-id="myCanvas"></canvas> ``` 2. 在 JS 文件中获取 Canvas 组件的上下文： ```javascript const context = wx.createCanvasContext('myCanvas'); ``` 3. 绘制各种形状： ```javascript // 绘制矩形 context.rect(10, 10, 100, 50); context.setFillStyle('red'); context.fill(); // 绘制圆形 context.beginPath(); context.arc(100, 100, 50, 0, 2 * Math.PI); context.setFillStyle('green'); context.fill(); // 绘制线条 context.beginPath(); context.moveTo(50, 50); context.lineTo(150, 50); context.setStrokeStyle('blue'); context.stroke(); ``` 4. 绘制文字： ```javascript context.setFontSize(20); context.setFillStyle('black'); context.fillText('Hello World', 50, 150); ``` 5. 绘制图片： ```javascript wx.getImageInfo({ src: 'https://example.com/image.jpg', success(res) { context.drawImage(res.path, 50, 200, 100, 100); context.draw(); } }); ``` 6. 最后，调用 `context.draw()` 方法将绘制的内容显示在 Canvas 组件上。 以上就是一个简单的 Canvas 画图示例。你可以根据自己的需要，使用 Canvas 组件绘制更复杂的图形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值