如何使用canvas进行画图

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fangkang7/article/details/82713931

画一个矩形

//创建一个画布
const ctx = wx.createCanvasContext('myCanvas')

// 设置矩形边框
ctx.setStrokeStyle('#fff')
// 设置矩形宽高  四个参数,前俩个为x,y轴,后俩个是矩形的宽和高

在画布上填充文字

// 设置文字大小
ctx.setFontSize(14)
// 设置文字颜色
ctx.fillStyle = '#9d9d9d';
//设置字体
ctx.font = '黑体';
// 填充文字

在画布上填充图片

let canvas ='../../resource/canvas.png';

网络图片本地保存

 // // 封面图
        var path = 'https://www.weiuid.com/attachs/uploads/20180904/f807827b32d5668462ac3e51f949592e.jpg';
        wx.getImageInfo({
          src: path,//服务器返回的图片地址
          success: function (res) {
            //res.path是网络图片的本地地址
            let Path = res.path;

            ctx.drawImage(Path, 0, 0, 400, 200)

          },
          fail: function (res) {
            //失败回调
          }

最后一步即可


ctx.draw()

 

将canvas画完之后,保存为图片,进行预览

ctx.draw(false, function () {
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function (res) {
                  console.log(res.tempFilePath)
                  wx.previewImage({
                    urls: [res.tempFilePath] // 需要预览的图片http链接列表
                  })
                }
              })
            });
展开阅读全文

没有更多推荐了,返回首页