创建canvas标签

画布顾名思义首先要创建一个画布才能有地方作画
canvas就是用来承载这个画布的
在template标签中写

<canvas @longtap="saveimage" :style="sty" canvas-id="firstCanvas" id="firstCanvas"></canvas>

canvas属性

小伙伴们可以根据自己的需求填写哦~

获取canvas上下文

canvas上下文是一个具有属性和方法的对象,用于在canvas标签内呈现图像等.

 var ctx = uni.createCanvasContext('firstCanvas'); // 使用画布创建上下文 图片

开始绘制

获取完上下文后就可以开始在画布上进行绘制了
可以画图片,文字二维码等

画图片

画图片分为两种情况:本地图片、网络路径的图片

本地图片

本地图片可以直接绘制
直接绘制即可:
使用drawimage(‘地址’,x,y,宽,高)的方法绘制;

ctx.drawImage('../../static/image/doctor.png',0,0,100,100);
ctx.draw() //绘制

网络图片

网络图片不能直接绘制,会毫无反应,也不显示
网络图片需要先转换为本地路径图片然后再绘制

uni.getImageInfo({src: 'https://z3.ax1x.com/2021/08/31/hU0egI.jpg',//网络图片路径success(res) {var ctx = uni.createCanvasContext('firstCanvas'); // 使用画布创建上下文 图片ctx.drawImage(res.path, 0, 0, 375,627) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height;ctx.draw() //绘制}})

渐变色画背景图

ps:项目需要自己ps了一个渐变图上传后用画布画出来了
但是!!!加载相当慢0.0
于是又了上面标题!!!canvas画渐变背景

创建一个渐变色线性对象

1.创建一个渐变色线性对象
2.定义渐变色颜色
3.设置fillStyle为当前的渐变对象
4.绘制已填色

var grad = ctx.createLinearGradient(0, 0, 0, that.center); //创建一个渐变色线性对象
grad.addColorStop(0, "#05D2D0"); //定义渐变色颜色
grad.addColorStop(1, "#8EE3C8");
ctx.fillStyle = grad; //设置fillStyle为当前的渐变对象
ctx.fillRect(0,0,that.screenWidth,that.center);
var grad2 = ctx.createLinearGradient(0,that.center-1,that.screenHeight); //创建一个渐变色线性对象
grad2.addColorStop(0, "#8EE3C8");
grad2.addColorStop(1, "#05D2D0"); //定义渐变色颜色
ctx.fillStyle = grad2; //设置fillStyle为当前的渐变对象
ctx.fillRect(0,that.center-1,that.screenWidth,that.screenHeight);//绘制已填色

解释一下
渐变色线性对象:
grad = ctx.createLinearGradient(起始x, 起始y, 结束位置x坐标,结束位置y);
定义颜色
grad.addColorStop(序号, “颜色”);(ps:我试了三种色不行,目前应该只支持两种颜色,于是有了上面的两个线性对象画了两次)
画了一个三色的渐变
设置fillStyle为当前的渐变对象:
ctx.fillStyle = grad;这个没什么好解释的保持一致!
绘制已填色:
ctx.fillRect(起始x,起始y,所画区域宽,所画区域高);

画文字

ctx.textAlign = 'center';//字体居中
ctx.font = 'normal 20px STXingkai'; // 字体
ctx.setFontSize(28) //设置字体大小，默认10
ctx.setFillStyle('#FFFFFF') //文字颜色：默认黑色
ctx.fillText("嘻嘻嘻嘻嘻", that.center, 70); //文字内容、x坐标，y坐标

画二维码

我这里是用了插件参考了苦夏木禾的uni-app base64转图片一文
先将二维码转换为图片然后再用画图片的方法出来

首先将插件引入项目。按照https://ext.dcloud.net.cn/plugin?id=123#detail

base64ToPath(that.code) //64码转为图片然后画出来.then(path => {//that.code是我从后台获取到的base64存在code中了console.log(path) //转后图片路径ctx.drawImage(path, 100, 100, that.center, that.center); //画二维码ctx.font = 'normal 20px STXingkai'; // 字体ctx.setFontSize(20) //设置字体大小，默认10ctx.setFillStyle('#FFFFFF') //文字颜色：默认黑色ctx.fillText("扫码了更多长按保存~", that.center, 400); //文字内容、x坐标，y坐标ctx.draw() //绘制}).catch(error => {console.error(error)})

坑点

1.上面我是分开讲述的所以可能有些地方都出现了ctx.draw() //绘制写一遍就ok了
2.注意时间,如果画第一个与第二个有时间间隙会出现第二个将第一个覆盖的情况.
ps没错就是我没注意
好了今天的画布就到这里,结束~~~

uniapp 画布绘制二维码,图片,文字的方法相关推荐

二维码图片文字居中问题
前两天在为"批量生成二维码压缩并下载功能"做技术选型时,遇到了在不同服务器文字居中效果不一致问题,一直觉得是在不同系统对绘制文字的开始位置有问题引起,今天找到了解决方法,记录一 ...
微信小程序二维码图片的宣传方法都有哪些
在小程序非常发达的今天,很多的商家都是会有自己的小程序,小程序二维码也是非常常见的,对于每一个朋友们而言,要想让自己的小程序得到更多的朋友们的关注,那么是需要做好对其的宣传工作的.通过小程序二维码图片 ...
uniapp将二维码图片、文字绘制到canvas上并下载
项目需求:页面展示带log的电子健康卡二维码并实现下载,下载的二维码图片里有还要有文字信息页面展示: 下载的二维码: 1.使用uQRCode插件:https://ext.dcloud.net.cn/ ...
C#生成带背景和文字的二维码图片
/// <summary> /// 生成带背景和文字的二维码图片 /// </summary> /// <param na ...
qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码
文章目录一.通过qrcodejs2生成一个二维码二.点击[下载配置服务器二维码]来下载二维码 1.通过canvas去绘制边框+二维码+logo (1)为canvas增加绘制圆角矩形的方法(can ...
uniapp小程序绘制二维码生成图片截图保存到本地
项目场景: 适应于uniapp中二维码生成图片进行截图保存问题描述: 今天用uniapp写小程序二维码并保存到本地,网上的完全没有用,最后自己写了一个, 1.使用weapp.qrcode生成二维码, ...
Java实现二维码和文字合成一张新图片
很久没来写文章了,自己忙又懒.最近实现了一个需求,有点意思,就想起来记录一下. 业务需求:生成一个二维码,旁边还要加点解释说明什么的,(类似)最终效果如下一.实现思路 1.二维码生成:使用hutoo ...
java生成二维码图片（有logo），并在图片下方附文字
logo配置类 /*** Created by Amber Wang on 2017/11/27 17:25.*/import java.awt.*;public class LogoConfig { ...
用C# GDI 绘制一张精美的分享二维码图片
C# 用GDI 绘制一张精美的分享二维码图片简单干脆,直接上代码下面附带上面用到的一些方法最后附带最终生成效果简单干脆,直接上代码 var key = "http://www.xx ...

uniapp 画布绘制二维码,图片,文字的方法

uniapp 画布绘制二维码