案例使用"/>

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

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

下载地址：

获取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();})
},

使用到方法

使用到属性

看一下其它效果

二、绘制矩形

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);}
})

下载地址：