投稿
  1. 极客之音首页
  2. 技术随笔

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

小半 • • 技术随笔 • 阅读 393

导读：本篇文章讲解 微信小程序canvas2d使用封装与案例使用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

在这里插入图片描述
微信小程序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的id
    return 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 线条样式，默认是black
    ctx.strokeRect(10, 20, 100, 100);

    //填充矩形--实心
    ctx.fillStyle='orange'; //fillStyle 填充样式，默认是black
    ctx.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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107053.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！