草庐IT

Canvas-EventSystem-Panel

全部标签

微信小程序使用canvas绘制二维码实现跳转小程序

开始接到这个需求的时候,我查阅文档获取小程序码|微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白名单,或者是云开发(显然他们不需要云开发)这时候我跟他们说,前端画不了跳转小程序页面的二维码,要后端巴拉巴拉的。。。结果打脸时刻来了,(这个故事告诉我们,文档要看干净点)扫普通链接二维码打开小程序|微信开放文档发现可以在后台按照二维码规则部署小程序链接。(千万千万不要随便说:前端做不了,后端才行。疑似甩锅的行为会显得自己很菜。。。虽然自己的确很菜)1、开发前准备在上代码之前,我们得先拿到小程序的链接,这样

微信小程序插件--wxml-to-canvas(生成图片)

一、需求    项目中要实现一个将图片分享到朋友圈的功能,将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。二、官方示例使用方法    1.安装wxml-to-canvasnpminstall--savewxml-to-canvas    2.JSON组件声明{"usingComponents":{"wxml-to-canvas":"wxml-to-canvas",}}     3.wxml引入组件{src}}">{src}}"style="width:{{width}}px;height:{{height}}px">    4. js获取实例const{wxml,sty

微信小程序插件--wxml-to-canvas(生成图片)

一、需求    项目中要实现一个将图片分享到朋友圈的功能,将生成的海报转成图片保存到手机。用到了wxml-to-canvas插件。二、官方示例使用方法    1.安装wxml-to-canvasnpminstall--savewxml-to-canvas    2.JSON组件声明{"usingComponents":{"wxml-to-canvas":"wxml-to-canvas",}}     3.wxml引入组件{src}}">{src}}"style="width:{{width}}px;height:{{height}}px">    4. js获取实例const{wxml,sty

uniapp 手写canvas海报(兼容android/ios/h5/微信小程序)

先上成功图1.在父组件里面定义弹出层,并且调用子组件制作海报的方法2.点击显示二维码调用子组件海报方法showPoster(customerPostId){         //console.log(this.$refs.positionPoster)         this.$refs.positionPoster.createPoster(customerPostId);      }3.mounted方法里面获取手机屏幕的宽度,并且设置canvas的大小 uni.getSystemInfo({         success:res=>{            this.canvas

uniapp 手写canvas海报(兼容android/ios/h5/微信小程序)

先上成功图1.在父组件里面定义弹出层,并且调用子组件制作海报的方法2.点击显示二维码调用子组件海报方法showPoster(customerPostId){         //console.log(this.$refs.positionPoster)         this.$refs.positionPoster.createPoster(customerPostId);      }3.mounted方法里面获取手机屏幕的宽度,并且设置canvas的大小 uni.getSystemInfo({         success:res=>{            this.canvas

微信小程序使用canvas绘图,圆形头像,网络背景图,文字,虚线,直线

//绘图getCanvas(index){varself=this;console.log('绘图')constquery=wx.createSelectorQuery();query.select("#shareCanvas0").fields({node:true,size:false}).exec((res)=>{constcanvas=res[0].node;constctx=canvas.getContext('2d');canvas.width=1144;canvas.height=2392;self.setData({drawing:true,})newPromise(funct

微信小程序使用canvas绘图,圆形头像,网络背景图,文字,虚线,直线

//绘图getCanvas(index){varself=this;console.log('绘图')constquery=wx.createSelectorQuery();query.select("#shareCanvas0").fields({node:true,size:false}).exec((res)=>{constcanvas=res[0].node;constctx=canvas.getContext('2d');canvas.width=1144;canvas.height=2392;self.setData({drawing:true,})newPromise(funct

用canvas绘制微信小程序海报页面并保存相册-适用微信原生

微信小程序绘制海报并保存相册tip:代码中使用的是uni的api如果使用原生微信小程序开发,可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一、分析需求二、准备数据三、编码开始html部分解析:js部分1、准备好数据后开始绘制解释:2、保存图片解析:总结前言本片文章主要是把我工作中实际用到,可以整合出来的功能,做一个总结和讲解。1、如何使用canvas2、canvas绘制后如何生成图片3、将图片保存到相册4、难点:如何解决canvas层级高于position定位层级问题,如何适配不同屏幕大小比例一、分析需求两种方案:进入页面先绘制canvas,点击按钮后再生成图片并保存相册进

用canvas绘制微信小程序海报页面并保存相册-适用微信原生

微信小程序绘制海报并保存相册tip:代码中使用的是uni的api如果使用原生微信小程序开发,可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一、分析需求二、准备数据三、编码开始html部分解析:js部分1、准备好数据后开始绘制解释:2、保存图片解析:总结前言本片文章主要是把我工作中实际用到,可以整合出来的功能,做一个总结和讲解。1、如何使用canvas2、canvas绘制后如何生成图片3、将图片保存到相册4、难点:如何解决canvas层级高于position定位层级问题,如何适配不同屏幕大小比例一、分析需求两种方案:进入页面先绘制canvas,点击按钮后再生成图片并保存相册进

我的第一个项目(七):(解决问题)Vue中canvas无法绘制图片

好家伙, 现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入 然后,直接死在第一步,图片渲染都成问题 先用vue写一个测试文件来测试canvas的绘制"stage">"drawsth()">添加"../assets/logo.png"alt="">//import{PlaneBattle}from"../../../../PBforVue/startgame"//console.log(document.getElementById('stage'))//plane.create(document.getElementById('stage'));exportdefault{meth