微信小程序canvas2d使用封装与案例使用，看一下这边封装效果
canvas2d文档：https://www.canvasapi.cn/

下载地址：https://download.csdn.net/download/Linlietao0587/86828749

获取context方法

<canvas type="2d" id="myCanvas1" style="width: 750rpx;height: 200px;"></canvas>

封装好的获取函数

// 获取canvas实例和ctx画笔
getMyCanvasAndCtx(id) {//id  canvas 2d的idreturn new Promise(resolve => {const query = wx.createSelectorQuery()query.select(`#${id}`).fields({node: true,size: true}).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr);var data = {canvas: canvas,ctx: ctx}resolve(data)})})
},

一、绘制直线

已经封装好方法

看其中一个已经封装好的函数

//绘制横线（水平）
drawHLine(res, x, y, lineLong, lineWidth, lineColor) {//res    包含canvas与ctx//x,y    横坐标与纵坐标//lineLong  线长//lineWidth 线宽//lineColor 颜色return new Promise(resolve => {let ctx = res.ctx;ctx.save(); //保存绘图上下文ctx.beginPath(); //开始绘制ctx.lineWidth = lineWidth; //线的宽度ctx.strokeStyle = lineColor; //线的颜色ctx.moveTo(x, y); // 将坐标移至直线起点ctx.lineTo(x + lineLong, y); // 绘制直线ctx.stroke(); // 通过线条绘制轮廓（边框）ctx.restore();resolve();})
},

使用到方法

方法	解释
ctx.moveTo(x,y)	起始点
ctx.lineTo(x,y)	与末端点连成直线
ctx.stroke()	描边

使用到属性

属性	说明
ctx.lineWidth=value	线宽
ctx.strokeStyle=value	描边样式

看一下其它效果

二、绘制矩形

canvas.getMyCanvasAndCtx('myCanvas1').then(res => {let ctx = res.ctx;//描边矩形--空心ctx.lineWidth=5; //lineWidth 线条边线线宽ctx.strokeStyle='orange';//strokeStyle 线条样式，默认是blackctx.strokeRect(10, 20, 100, 100);//填充矩形--实心ctx.fillStyle='orange'; //fillStyle 填充样式，默认是blackctx.fillRect(130, 20, 100, 100);  //阴影ctx.shadowColor = 'blue'; //阴影_颜色ctx.shadowBlur = 10;//阴影_模糊程度ctx.shadowOffsetX=40;//阴影_水平偏移ctx.shadowOffsetY=40;//阴影_垂直偏移ctx.strokeRect(250,20,100,100)ctx.clearRect(250,20,100,100) //清空矩形
})

三、绘制圆弧

canvas.getMyCanvasAndCtx('myCanvas1').then(res => {let ctx = res.ctx;ctx.beginPath();//arc(x, y, radius, startAngle, endAngle [, anticlockwise]);//arc(圆心x坐标,圆心y坐标,半径，起始角度,结束角度,是否按逆时针方向绘制)ctx.arc(80,80,50,0,Math.PI*2,false)ctx.stroke();ctx.beginPath();ctx.moveTo(250,80)ctx.arc(250,80,50,Math.PI*1/3,Math.PI*1,true)ctx.closePath();ctx.stroke();
})

canvas.getMyCanvasAndCtx('myCanvas2').then(res => {let ctx = res.ctx;for (var i = 0; i < 10; i++) {ctx.beginPath();ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);ctx.fillStyle = "rgba(255,0,0,0.25)";ctx.fill(); //填充刚才所画的圆形}
})

四、绘制文字

封好的函数

使用方法

五、绘制变化

 canvas.getMyCanvasAndCtx('myCanvas1').then(res => {let ctx = res.ctx;ctx.save(); //保存了当前context的状态ctx.fillStyle = "gray";ctx.fillRect(0, 0, res.canvas.width, res.canvas.height); //大矩形ctx.fillStyle = "orange"; //页面填充颜色ctx.fillRect(10, 10, 350, 330); //大矩形ctx.fillStyle = "black"; //rgba(255,0,0,0.1)ctx.fillRect(20, 20, 100, 100); //正方形//平移1 缩放2 旋转3        ctx.translate(170, 20); //坐标原点平移(100, 100)ctx.scale(0.5, 0.5); //x,y轴是原来一半ctx.rotate(Math.PI / 4); //旋转45度ctx.fillStyle = 'green'ctx.fillRect(0, 0, 100, 100); //平移 缩放 旋转后的正方形ctx.restore(); //恢复之前保存的绘图状态ctx.beginPath(); //开始绘图路径ctx.arc(280, 60, 50, 0, 2 * Math.PI, false); //绘制圆ctx.stroke();ctx.fill();canvas.drawWaterMark(res, 'Hello 你好', 15, 'white', 0.5).then(()=>{this.data['myCanvas1']=res.canvas;})

这个也有封装好水印，可以直接调用

还有图层混合模式

canvas.getMyCanvasAndCtx('myCanvas2').then(res => {let ctx = res.ctx;canvas.drawImage(res, '/img/1.jpg', 0, 0, 500, 333).then(() => {//source-* (over、in、out、atop)//destination-*(over、in、out、atop)//lighter 线性减淡（添加）//copy 显示最新 xor 重叠透明 multiply 正片叠底//screen 滤色 overlay 叠加 darken 变暗 lighten 变亮//color-dodge 颜色减淡 color-burn 颜色加深//hard-light 强光 soft-light 柔光 difference 差异//exclusion 排除 hue 色调 saturation饱和度//color 色值 luminosity亮度ctx.globalCompositeOperation = 'lighter';canvas.drawImage(res, '/img/bright.jpg', 0, 0, 500, 333)this.data['myCanvas2']=res.canvas;})
})

六、动画

const canvas = require('../../utils/canvas.js')
var x = 400;
var n = 0; // 计数器
var offset = 0;
Page({data: {},draw1() {canvas.getMyCanvasAndCtx('myCanvas1').then(res => {const img = res.canvas.createImage();img.src = '/img/people.jpg';img.onload = () => {//从原图(60*n)位置开始截取中间一块宽60*高80的区域，显示在屏幕(x,0)处 res.ctx.drawImage(img, 60 * n, 0, 60, 80, x, 0, 60, 80);};if (n >= 8) {n = 0;} else {n++;}if (x >= 0) {x = x - 30; //前移30像素} else {x = 400; //回到右侧}})},draw2() {canvas.getMyCanvasAndCtx('myCanvas2').then(res => {let canvas = res.ctx;let ctx = res.ctx;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.setLineDash([8, 4]);//虚线样式（实线和透明部分长度）offset += 0.5;if (offset > 24) {offset = 0;}ctx.lineDashOffset = offset;//虚线绘制的偏移距离ctx.strokeRect(10, 10, 236, 116);})},onLoad(options) {this.setData({interval1: setInterval(this.draw1, 100), // 定时器，每0.1秒执行一次draw()函数interval2: setInterval(this.draw2, 10), // 定时器，每0.1秒执行一次draw()函数})},onHide() {console.log('onHide')clearInterval(this.data.interval1);clearInterval(this.data.interval2);},onUnload() {console.log('onunload')clearInterval(this.data.interval1);clearInterval(this.data.interval2);}
})

下载地址：https://download.csdn.net/download/Linlietao0587/86828749

微信小程序canvas2d使用封装与案例使用相关推荐

《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...
微信小程序定位权限封装
微信小程序定位权限封装 getUserOrSystemPermissions.js //如需动态获取权限,修改res.authSetting['scope.userLocation']与scope: ...
uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装前言一.登录接口二.登录上代码总结前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法一.登录接口 uni.getUserProfile ...
PbootCMS微信小程序API的封装使用教程
PbootCMS微信小程序API的封装使用教程原文网址:https://www.lkcms.top/rgcms/58.html 第一步:准备md5加密文件 PbootCMS的签名参数signatur ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
微信小程序wx.request封装
实现功能: 1.实现对wx.request()的封装 2.使用封装后的wx.request()自动添加用户的openid和unionid 主要使用技术:promise 功能简述: 我们在使用微信小程序 ...

微信小程序canvas2d使用封装与案例使用